CODEWITHSUNDEEP
htmlcsstext
Devang
Devang

Reputation: 1541

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!

Upvotes: 7

Views: 9032

Answers (3)

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7246

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

Upvotes: 1

kaur
kaur

Reputation: 627

since the transform rotates the whole div section, you can set the height and width of the div containing the text and then transform it.

Upvotes: 0

TNi
TNi

Reputation: 16682

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>.

Upvotes: 1

Related Questions