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

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

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>

Answer 3

Довольно простой способ сделать это - использовать 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;
}

Это приведет к следующему:

If you want to just rotate the entire box just remove the transform property. Resulting in:

введите описание изображения здесь