CSS对齐旋转的文本答案

【问题标题】：CSS align rotated textCSS对齐旋转的文本
【发布时间】：2020-10-07 15:48:34
【问题描述】：

我在 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/

【问题讨论】：

您希望文本向右对齐，还是希望框以其他方式旋转以使文本底部朝左？
padding: 1rem 4rem 1rem 0; 也可以（或只是padding-right: 4rem）

标签： css rotation right-align

【解决方案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 属性。结果：

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

Flexbox 可以做到这一点：

请注意，writing-mode 和 transform 应该在 child 而不是 parent。

.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>

【讨论】：