css - 如何使用变换旋转更改垂直文本的尺寸

Question

如何垂直旋转文本并同时更改边框的尺寸？

使用“显示:内联 block ；”会将所有内容压缩到 1 列中。

http://jsfiddle.net/d3ud6/8/

/*display: inline-block;*/
overflow:hidden;
white-space:nowrap;
width:1.5em;
height: 1.5;
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);

Answer 1

您可以将文本放在一个 div 中并旋转它。然后根据需要设置列的边框(参见 updated fiddle ):

#rotate th div {
    white-space:nowrap;
    width: 20px;
    transform: translate(0px, 60px) rotate(270deg);
    -webkit-transform: translate(0px, 60px) rotate(270deg);
    -moz-transform: translate(0px, 60px) rotate(270deg);
    -ms-transform: translate(0px, 60px) rotate(270deg);
    -o-transform: translate(0px, 60px) rotate(270deg);
}
#rotate th {
    border: 1px solid green;
    height: 150px;
    max-width: 1.5em;
    overflow: hidden;
}