用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它来实现此目的。

正式语法

水平TB | 垂直-rl | 垂直-lr | 侧身-rl | 侧身-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 说：

这是一项实验性技术，由于该技术的规范尚未稳定，请检查兼容性表以了解在各种浏览器中的使用情况。另请注意，随着规范的变化，实验技术的语法和行为可能会在未来版本的浏览器中发生变化。

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