Rotating only text (not div) in div element

Question

I am trying to create a web page with a large number of div elements whose positions and sizes are created separately. Then I want to insert text into these elements, so I use JS to put text in innerHTML. Is there a way here that I can only rotate the text 90 degrees (and not the div, 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 div itself, not just the text.

Any idea if possible.

Thanks!

Answer 1

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

Answer 2

Take a look at this link: http://snook.ca/archives/html_and_css/css-text-rotation It looks like you need to do hax for different browsers ... Maybe CSS3 has a better solution.

Answer 3

Wrap the text in a range and set it in the inline box. Note how the parent div does not rotate 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

Answer 4

since the conversion rotates the entire section of the div, you can set the height and width of the div containing the text, and then convert it.