CSS 对齐旋转文本

Question

我在 div 中有一个旋转的文本。 我想将跨度与 div 的“右”（见红色箭头）对齐

<div class="rotateText">
  <span>This is a rotated multiline text please display it in a correct way. This is a rotated multiline text please display it in a correct way</span>
</div>

    .rotateText{
      width: 200px;
      height: 300px;
      writing-mode: tb-rl;
      transform: rotate(-180deg);
      background-color: yellow;
    }

https://jsfiddle.net/konqmr8c/1/

Answer 1

非常简单的方法是使用position: absolute 。 relative对于父容器应用，以便您可以将跨度锚定到它，然后设置left: 0 。 这将使文本紧贴容器的底部。

.rotateText{
  width: 200px;
  height: 300px;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  background-color: yellow;
  position: relative;
}

span {
  position: absolute;
  left: 0;
}

这将导致：

如果您只想旋转整个框，只需删除transform属性。 导致：

Answer 2

.rotateText{
  width: 200px;
  height: 300px;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  background-color: yellow;
  position:relative;
}

span {
  border:1px solid red;
  position:absolute;
  left: 0px;
}

Answer 3

你可能不需要额外的容器， flex ， writing-mode和align-items应该做。 某些浏览器缺少writing-mode:sideways-lr需要转换才能在另一侧重置它。

 .rotateText { width: 200px; height: 300px; display: flex; background-color: yellow; align-items: flex-end; /* writing-mode:sideways-lr; ... would be great if that worked everywhere, let's use what's avalaible and transform:*/ writing-mode: tb-rl; transform: scale(-1) }.rotateText.column { /* if a few child, you need to reset direction and alignement */ flex-direction: column; justify-content: flex-end; align-items: start } /* demo purpose */.rotateText { float: left; margin: 0.5em; } h1, p { margin: 0.15em; }

 <div class="rotateText"> This is a rotated multiline text please display it in a correct way. This is a rotated multiline text please display it in a correct way </div> <div class="rotateText column"> <h1>Title prior text</h1> <p>This is a rotated multiline text please display it in a correct way. This is a rotated multiline text please display it in a correct way </p> </div>

Answer 4

Flexbox 可以做到这一点：

请注意， writing-mode和transform应该在孩子而不是父母身上。

 .rotateText { width: 200px; height: 300px; display: flex; background-color: yellow; justify-content: flex-end; } span { writing-mode: tb-rl; transform: rotate(180deg); }

 <div class="rotateText"> <span>This is a rotated multiline text please display it in a correct way. This is a rotated multiline text please display it in a correct way</span> </div>