Question

有没有办法在桌子内旋转文字90度：

类似的东西：

    <tr>
        <th class="bottomtop">
            <span class="bottomtop">{{ task_definition }}</span>
        </th>
    </tr>

.bottomtotop { 
    transform:rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}

我希望文字看起来像：

h
e
l
l
o
# with the actual letters rotated 90 degrees counter-clockwise.

Answer 1

我认为您的主要问题是您的span有一个bottomtop类，但您的CSS定义了bottomtotop。我刚刚添加了一个display:block，并更正了类名，它运行正常。 http://jsfiddle.net/c5FzT/

.bottomtop { 
display:block;
transform:rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);

}

Answer 2

可能你想要这样的东西

.bottomtotop { 
 -webkit-transform: rotate(90deg); 
 -moz-transform: rotate(90deg);   
  display:inline-block
}

最重要的是span是一个内联元素。变换不适用于此。因此，您需要使用块元素或使用display:inline-block或display:block span，并且当然会将类名与标记匹配。（你在标记中提到 bottomtop 但在你的css中它是 bottomtotop ）

Js Fiddle

在表格中从下到上的文字

2 个答案: