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

transforms 完全视觉效果......它们不会影响元素的布局。空间没有添加 ......它始终存在。

请考虑使用writing-mode。

＆＃13;

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

＆＃13;

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

＆＃13;

写入模式CSS属性定义文本行是水平放置还是垂直放置，以及块的前进方向。

^{Writing-mode @ MDN}

Answer 2

您可以尝试使用writing-mode。

writing-mode CSS属性定义文本行是水平放置还是垂直放置以及块进展的方向。

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

这两项技术，要求设置旋转文本容器的宽度，并从Flex容器构建。它应该适用于IE，FF，Chrome。 （display:table/table-cell可以是旧浏览器的另一个显示选项）

Answer 3

非常简单的回答

<div class="fixed-left">
  <div class="fixed-left-inner">
    <div class="fixed-left-item">
      <div class="fixed-left-text">Text might be on left side</div>
      <div class="fixed-left-text">Text might be on left side</div>
    </div>
  </div>
</div>



.fixed-left{
    display: block;
    position: fixed;
    width: 40px;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 99999;
    height: 100%;
 }
 .fixed-left-inner{
    display: inline-block;
    vertical-align: bottom;
    height: 100%;
 }
 .fixed-left-item{
    display: block;
    transform: translate(0,50%) rotate(-90deg);
    transform-origin: 0 0;
    vertical-align: bottom;
    height: 100%;
    margin-top: 110px;
    width: 220px;
 }
 .fixed-left-text{
      font-size: 13px;
    line-height: 18px;
 }

Answer 4

你走了：

http://jsfiddle.net/9Y7Cm/13205/

vertical-align是回答的关键。

CSS将文本垂直旋转 - 双方都有额外空间

4 个答案: