CSS：垂直格式化文本

Question

CSS可以垂直格式化文本吗？例如像这样image显示。该命令/解决方法应该在Safari中使用，因为它在iPhone应用程序中使用。

非常感谢。 Doonot

Answer 1

有了CSS3，你可以使用变换：旋转

 

div { 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
transform: rotate(-90deg); 
position: absolute; 
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
}

但是...我带过滤器的经验是，他们用文字拧一点点视觉。足够糟糕，它可以成为一个交易断路器。

Answer 2

是的Safari/Webkit和其他支持CSS文本旋转的浏览器。

为了执行转换，元素必须设置为display:block。在这种情况下，只需将声明添加到要旋转的跨度。 Opera在10.50中具有-o-transform支持

当涉及到Internet Explorer中的效果时，会有一个名为BasicImage的过滤器，它提供了旋转任何具有布局的元素的能力。

#element-id{ 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
-o-transform: rotate(-90deg); 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
display: block; 
position: absolute; 
left: 10px; 
top: 15px; 
} 

编号：TEXT ROTATION WITH CSS

Answer 3

转换代码，特别是在webkit中，变得糟糕透顶。在撰写本文时，转换矩阵应用于渲染引擎，但不应用于空间计算，因此Firefox和Chromium都尝试在200x100的单元格中渲染100x200的区域。尝试切换宽度/高度会导致在之前重新计算变换区域，因此应用了变换。

最简单也是最可靠的方法是使用SVG生成文本的图像。不幸的是，它是一个两阶段的过程：

<svg> 
    <text x="50" y="50" transform="rotate(0 0,0)">Category</text> 
</svg> 

呈现在浏览器中，并获取文本标签（在这种情况下，59x17）的尺寸，并将其插入到SVG。

<svg width='25px' height='60px'> 
    <text x="17" y="59" transform="rotate(270 17,59)">Category</text> 
</svg> 

随着59 X知识+的内容，我稍微增加容器的大小，因为大小似乎忽视挂字形（在y的尾部，例如）。 围绕右下角旋转270度会导致旧的右上角成为新的左上角（即文字被转换为垂直，自下而上）。 文本也受到常规样式表规则的约束，但如果这会更改文本大小，则必须重新计算维度。