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

Question

当我使用 TEXT 旋转和内联图层时，它会在旋转时增加额外的空间（大文本的宽度），我不想修复。使用 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

您可以尝试使用writing-mode.

CSSwriting-mode属性定义文本行是水平还是垂直布局以及块前进的方向。

https://codepen.io/gc-nomade/pen/rGJGzQ?editors=1100

.rotate {
  writing-mode:vertical-rl;
  transform:scale(-1);
  width:50px;
  margin-right:50px;
}

body {
  display:flex;
  align-items:flex-end; 
}

<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

或transform:rotate(-90deg) （这是您的第一选择），但使用伪根据文本长度重置高度。（这需要使用 rgba() 颜色并将两行文本设置在单个容器中。https: //codepen.io/gc-nomade/pen/RLQLJG ?editors=1100

.rotate {
  width:110px;
}
.rotate>span   {
  display:inline-block; 
  transform:rotate(-90deg)
}
.rotate > span:before {
  content:'';
  padding-top:100%;
  float:left;
}

body {
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
}

			<div style="display:inline-block; position:relative;" class="rotate">
				<span style=" font-size: 55px;color: rgba(0,0,0,0.15);white-space: nowrap;">BACKGROUND<br/>
				<span style="display:block;font-size: 45px;color: #222222;text-align:center;">TITLE</span></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

这里的两种技术都需要设置旋转文本容器的宽度，并且都是从弹性容器构建的。它应该在 IE、FF、Chrome 中工作。 （display:table/table-cell可以是旧版浏览器的另一个显示选项）

Answer 2

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>

书写模式 CSS 属性定义文本行是水平还是垂直布局以及块前进的方向。

^{写作模式@MDN}