html - CSS 垂直旋转文本 - 两侧的额外空间

Question

当我使用文本旋转和内联图层时，它会在旋转时增加额外的空间(大文本的宽度)，我不想修复。使用 CSS 旋转时避免两侧出现额外空间(元素宽度)的最佳方法是什么。

下面是我的代码:

.rotate {
  display: inline-block;
  white-space: nowrap;
  transform: translate(0, 100%) rotate(-90deg);
  transform-origin: 0 0;
  vertical-align: bottom;
}

.rotate:before {
  content: "";
  float: left;
  margin-top: 100%;
}

.rotate:after {
  content: "";
  display: inline-block;
}

<div style="display:inline-block; position:relative;" class="rotate">
  <span style="displock;width:100%;font-size: 55px;color: #222222;opacity: 0.15;white-space: nowrap;">BACKGROUND</span>
  <span style="display:block;width:100%;font-size: 45px;color: #222222;text-align:center;">TITLE</span>

</div>
Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element

Answer 1

transforms 是完全可视化的...它们不会影响元素的布局。空间未被添加...它一直存在。

考虑改用writing-mode。

.rotate {
  writing-mode: vertical-rl;
  text-align: center;
  transform:rotate(180deg);
  background: pink;
  height:100vh;
}

<div class="rotate">
  <h2>BACKGROUND</h2>
  <h1 >TITLE</h1>
</div>

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

^{Writing-mode @ MDN}