html - 用 DIV 包围转换后的元素

Question

我想旋转 DIV 中的文本元素，但是，在文本旋转后，我的 div 像空的一样折叠起来。有没有 css 技巧可以让我的 DIV 仍然包围我的内部元素？

这是我的代码:

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>

Answer 1

改为变换:旋转(xdeg)；你可以使用 writing-mode实现这一目标。

形式语法

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

重新访问您的代码:http://codepen.io/gc-nomade/pen/MpNBMa或以下

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>

注意:MDN 说:

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.

在这里查看:http://caniuse.com/#search=writing-mode