如何使用“变换旋转”使用“垂直文本”更改尺寸

Question

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

使用＆＃34; display：inline-block;＆＃34;将所有内容整理成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;
}