如何对齐表格中的旋转文本?

时间:2011-05-13 15:27:24

标签: html css alignment tablelayout

我发现如何将文本(感谢SO)旋转90°,问题是文本是垂直渲染的,但是(我猜)框是水平计算的(如之前旋转)。

我有包含这种旋转文本的表格单元格,我想将文本对齐在单元格的顶部。结果我得到这样的东西:

轮换前的文字:

rotated90

轮换后的文字(请原谅我的ASCII截图):

0
9
d
e
t
a
t
o
r

旋转文本与单元格顶部对齐:

0
9
d
e
-----------
t
a
t
o
r

因此,部分文本实际上位于单元格之上,这很糟糕。

期望效果:

-----------
0
9
d
e
t
a
t
o
r

问题:如何垂直对齐文字,即如何让浏览器在旋转后(不是之前)看到框?

1 个答案:

答案 0 :(得分:1)

如果没有指定旋转文本所在单元格的高度,则看起来不可能。

Webkit / Mozilla在元素的显示上执行旋转,但不在其框模型上执行旋转。

CSS3属性writing-mode在IE中正常工作,旋转盒子模型。大多数浏览器都应支持此属性,但我读过的文章说它当时只支持IE。