Resize div when content is rotated

Question

I do not know that my question is very different from the question in a possible duplicate. However, the answer in a possible duplicate does not work (even the jsFiddle provided as the answer does not even seem to rotate the text). The answer to this topic actually solved my problem.

I am trying to get a div for resizing when the text inside is rotated 90 degrees. Right now, the div remains the same width, even if the text gets “thinner" by rotating it.

I have something like this:

html, body { height: 100%; margin:0px; } .pane { width: auto; float:left; height: 100%; border: 1px solid black; } .vertical { display: block; transform-origin: top right 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } <div class="pane"><span class="vertical clearfix">This is text</span></div> <div class="pane"><span>This is another Pane</span></div> 

You can see the plunk sample here .

I try to avoid using hard-coded heights or widths if possible.

Answer 1

when you use a transform or position: relative; the initial space used by the element remains unchanged, it is drawn only on the screen.

Here, if you want your rotating block to use only the width of one line, you need to set this width and allow the content to overflow.

translate can be used to replace content in view

white-space: nowrap to save text on one line

and ultimately, due to the use of the rotated value and reduced width, you can use the direction to overflow in the opposite direction.

 html, body { height: 100%; margin: 0px; } .pane { width: auto; float: left; height: 100%; border: 1px solid black; } .vertical { display: inline-block; text-align: left; float: right; padding-right: 1em; width: 0.25em; white-space: nowrap; direction: rtl; transform-origin: top left; transform: rotate(-90deg) translate(-100%); } 

 <div class="pane"> <span class="vertical">This is text</span> </div> <div class="pane"> <span>This is another Pane</span> </div> 

Alternatively, you can use min-width and negative margin, which actually reduces the width of the elements to none;

I would like to make it even simpler and more reliable.

 html, body { height: 100%; margin: 0px; } .pane { width: auto; min-width:1.2em; float: left; height: 100%; border: 1px solid black; } .vertical { display:inline-block; padding-right:0.25em; margin-right:-999px; transform-origin: top left; transform: rotate(-90deg) translate(-100%); } 

 <div class="pane"> <span class="vertical">This is text</span> </div> <div class="pane"> <span>This is another Pane</span> </div> <div class="pane"> <span class="vertical">This is some more text</span> </div>