surrounding transformed element with a DIV

Question

I would like to rotate a text element in a DIV, however, after the text rotates my div collapses like it was empty. Is there a css trick to make my DIV still surround my inner element?

here is what my code looks like:

li {
  border: 1px solid black;
  list-style-type: none;
}

p {
  display: inline-block;
  transform-origin: right bottom;
  transform: rotate(270deg);
}

<li>
  <div>
    <p>Some Text</p>
  </div>
</li>

<li>
  <div>
    <p>Some Text</p>
  </div>
</li>

Use writing-mode, it's made for this purpose http://codepen.io/gc-nomade/pen/MpNBMa https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode — G-Cyrillus, Apr 10 '17 at 14:25
@GCyrillus seeing how this question is already at 3 upvotes, you might want to make your comment an answer. — domsson, Apr 10 '17 at 14:48
Peter, does my earlier comment answers your question ? If yes then i might reopen and answer the question as it would not be a duplicate after all :) — G-Cyrillus, Apr 10 '17 at 17:26

G-Cyrillus · Accepted Answer · 2017-04-11T13:28:28.997

Instead transform:rotate(xdeg); you may use writing-mode to achieve this.

Formal syntax

horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Your code revisited: http://codepen.io/gc-nomade/pen/MpNBMa or below

li {
  border: 1px solid black;
  list-style-type: none;
}

p {
  display: inline-block;
  vertical-align: middle;
}

p.rotate {
  writing-mode: vertical-rl;
  /* for obsolete safari old win, add vendor prefix -webkit- */
  writing-mode: tb-rl;
  /* IEs */
  /* writing-mode:sideways-lr; could be the one */
  /* use scale() eventually untill sideways-lr is working everywhere */
  transform: scale(-1);
  padding: 1em;
  background: yellow;
  /* show me */
  max-height:10em; /* will force text to break on several lines if too long */
}

<ul>
  <li>
    <div>
      <p class="rotate">Some Text</p>
      <p>aside <br/>any <br/>other <br/>text <br/>aside <br/>any <br/>other <br/>text </p>
    </div>
  </li>

  <li>
    <div>
      <p class="rotate">Some more Text<br/>over 2 lines</p>
      <p>aside any other text</p>
    </div>
  </li>
  <li>
    <div>
      <p class="rotate">Some more Text over 10em of height at the most</p>
      <p>aside any other text</p>
    </div>
  </li>
</ul>

Note : MDN says :

This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Check it out here : http://caniuse.com/#search=writing-mode

Hey, I see you were the one who answered [the earlier question](http://stackoverflow.com/questions/36140628/resize-div-when-content-is-rotated?noredirect=1&lq=1) too. So you could update your answer there as well. — Mr Lister, Apr 11 '17 at 06:03
And then we can close this question as a duplicate again. ;) — Mr Lister, Apr 11 '17 at 06:03
@MrLister nop that one was about transform aside a container, size did not matter, here this question is about the container being sized according to its rotated text ;) (i put a yellow background to it to show where it stands and how it expands if text length is increased. it can also break in several lines ;) — G-Cyrillus, Apr 11 '17 at 13:22

surrounding transformed element with a DIV

1 Answers1