在一个div元素中仅旋转文本（而不是整个div）。

Question

我正在尝试创建一个包含许多div元素的网页，它们的位置和大小是分别创建的。接下来，我想将文本插入这些元素中，所以我使用JS将文本放在innerHTML中。这里是否有一种方法可以仅旋转文本90度（而不是div本身，因为我不想改变div元素的位置和方向）？

我尝试在CSS中使用以下代码： -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); 但它们都会旋转div本身，而不仅仅是文本。

你有什么想法吗？

谢谢！

- Devang

---

看一下这个链接： http://snook.ca/archives/html_and_css/css-text-rotation 似乎你需要为不同的浏览器做hack...也许CSS3有更好的解决方案。 - This statement is false

谢谢，我已经尝试过这个方法，但是这正是我想到使用webkit/moz transform的地方。但是它们会旋转整个div而不是文本。 - Devang

Answer 1

我没有尝试过这个，但为什么不在你当前的<div>和文本之间添加一个额外的<div>，并设置透明背景呢？然后你可以旋转那个<div>。

- TNi

---

是的，听起来很合理。如果没有更简单的方法，那就是我的蛮力前进方式了 :) - Devang

Answer 2

将文本包裹在span中，并将其设置为内联块。请注意，父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

- Alessandro Incarnati

Answer 3

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

- kaur