Question

我正在尝试创建一个包含大量div元素的网页，这些元素的位置和大小是分开创建的。接下来，我想在这些元素中插入文本，因此我使用JS将文本放在innerHTML中。有没有办法让我可以将文本旋转90度（而不是div本身，因为我不想改变div元素的位置和方向？

我试过了 -webkit-transform：rotate（-90deg）; -moz-transform：rotate（-90deg）; 在CSS中但它们都会自动旋转div而不仅仅是文本。

任何想法是否可行。

谢谢！

Answer 1

我没有试过这个，但为什么不在当前<div>和您的文字之间添加额外的<div>，并且背景透明？然后，您可以旋转<div>。

Answer 2

看一下这个链接： http://snook.ca/archives/html_and_css/css-text-rotation 好像你必须为不同的浏览器做hax ...也许CSS3有一个更好的解决方案。

Answer 3

将文本换行并将其设置为内联块。请注意父div不会与文本一起旋转。

<div class="roundedOne">
  <span class="rotate">TEXT</span>
</div>

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

.roundedOne {
  background: red;
}

<强> CODEPEN

http://codepen.io/alexincarnati/pen/JEOKzw

Answer 4

由于变换旋转整个div部分，您可以设置包含文本的div的高度和宽度，然后对其进行变换。

只旋转div元素中的文本（不是div）

4 个答案: