rotating only the text (not the div) in a div element

I am trying to create a webpage with a lot of div elements whose positions and size are created separately. Next, I want to insert text into those elements so I use JS to put the text in the innerHTML. Is there a way here that I can rotate just the text by 90degrees (and not the div itself since I don't want to change the position and orientation of the div elements?

I tried -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); in CSS but they all rotate the divs themselves and not just the text.

Any idea if this is possible.

Thanks!

---

I have not tried this, but why not include an extra <div> between your current <div> and your text, with a transparent background? You can then rotate that <div> .

---

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

---

Wrap the text in a span and set it to inline-block. Notice how the parent div doesn't not rotate together with the text.

<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/6906.html

上一篇: 从var中删除数字数组键

下一篇: 只旋转div元素中的文本（不是div）