html - CSS垂直文本需要很大的空间

Question

我正在使用 CSS 创建垂直文本。问题是，我希望将文本放在前一个 div 旁边，并且在两者之间或之后没有空格。我该如何解决这个问题？

<div id="wrapper">
  <div class="pull-left">
      here is some stuff
  </div>
  <div class="pull-left verticalText changeCursor">I'm vertical</div>
</div>

CSS（从 Bootstrap 向左拉）：

.changeCursor
{
    cursor: pointer;
}

.verticalText
{
    height: 100%;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);  /* für Safari und Co */
    -o-transform:rotate(90deg); /* Opera */
    -ms-transform:rotate(90deg); /* MS IE 9 */
    transform: rotate(90deg);
}

谢谢你的帮助！

Answer 1

问题是，<div>默认情况下，遗嘱要尽可能宽。此外，当您进行转换时，原点默认位于元素的中间。

如果你制作它们display: inline-block并添加

transform-origin: 0 0;

到.vertical-text规则，然后文本在第一个的右侧结束，但它与它重叠。要解决此问题，您可以使用translate()：

#wrapper > div { display: inline-block; }

.verticalText
{
    transform-origin: 0 0;
    -moz-transform: rotate(90deg) translate(0, -100%);
    -webkit-transform: rotate(90deg) translate(0, -100%);  /* für Safari und Co */
    -o-transform: rotate(90deg) translate(0, -100%); /* Opera */
    -ms-transform: rotate(90deg) translate(0, -100%); /* MS IE 9 */
    transform: rotate(90deg) translate(0, -100%);
}

这是一个 CodePen。