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

2018-05-31 10:08:07

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

我试过-webkit-transform：rotate（-90deg）; -moz-transform：rotate（-90deg）; 在CSS中，但他们都旋转divs本身，而不仅仅是文本。

任何想法，如果这是可能的。

谢谢！

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

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

将文本包装在一个范围内并将其设置为内嵌块。注意父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

链接地址: http://www.djcxy.com/p/6905.html

上一篇: rotating only the text (not the div) in a div element

下一篇: UIButton that will ignore a 'drag' and pass it to UIScrollView