旋转文本并缩小其容器以适应新宽度

Question

我想将一些文本旋转以进行竖向显示（y轴图表标签）。这些文本的长度可以是任意变量（但始终在一行上）。

我已经尝试使用CSS3变换进行旋转（请参见JSFiddle）：

.rotate {
   transform: rotate(270deg);
}

然而，正如规范中所述，旋转后元素的原始宽度和高度仍保留：

在HTML命名空间中，transform属性不会影响围绕变换元素的内容流。

这意味着元素的容器宽度会随标签文本长度而扩展，影响相邻图表的位置。

如何旋转文本并缩小其容器到新宽度？任何解决方案都可以，包括JavaScript/jQuery解决方案或其他方法。

- mtmacdonald

Answer 1

我发现可以使用绝对定位的方法来解决问题。旋转的文本可以绝对定位“相对于其最近的已定位祖先元素的边界”。具体做法如下：

• 在容器上设置position: relative，使其成为“最近的已定位祖先元素”。
• 在旋转的文本上设置position: absolute，并将其设置为容器底部（减去行高）。
• 从左上角旋转文本。

JSFiddle

.container {
  position: relative; /*make container the closest positioned ancestor*/
  border: 1px solid red;
  display: inline-block;
  height: 400px;
  min-width: 30px; /*same as line-height of rotated text*/
}

.rotate {
  text-align: center;
  overflow: hidden;
  height: 30px;
  line-height: 30px;
  width: 400px; /*matches the height of the container*/
  position: absolute;
  bottom: -32px; /*0 = bottom of container, then subtract (line-height+border)*/
  border: 1px solid blue;
  transform: rotate(-90deg);
  transform-origin: top left;
}

前提条件：

• 文本宽度可以设置为合理的值（例如容器的高度）
• 文本中没有换行符（单行解决方案）

- mtmacdonald