Как разместить текст нужного размера, набираемый вертикально, в поле?

Question

Я пытаюсь поместить текст вертикально на правой стороне поля. У меня вертикальная часть вниз, но я не могу поставить ее с правой стороны. Как я могу установить положение моего текста внутри поля?

.aboutbox {
  background-color: white;
  width: 150px;
  height: 100px;
  border: 6px solid black;
  text-align: bottom;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

<div class="aboutbox">ABOUT</div>

Answer 1

Было бы лучше, если бы вы использовали другой div для текста:

CSS

.aboutbox {
    background-color: white;
    width: 150px;
    height: 100px;
    border: 6px solid black;
}
.abouttxt {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    float: right;
    padding-bottom: 40px;
}

HTML

<div class="aboutbox">
    <div class="abouttxt">
    ABOUT
    </div>
</div>

Answer 2

выравнивание текста здесь не требуется, но преобразование удобно с масштабированием вместо вращения:

.aboutbox {
  background-color: white;
  width: 150px;
  height: 100px;
  border: 6px solid black;
  writing-mode: vertical-lr;
  }
  .right {
  transform:scale(-1,-1);
}

<div class="aboutbox right">ABOUT right</div>
<hr>
<div class="aboutbox">ABOUT</div>

Вы также можете использовать sideside-rl и flex выравнивание

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

sideways-rl

Содержимое течет по вертикали сверху вниз, и все глифы, даже те, что в вертикальных сценариях, установлены вбок вправо.

.aboutbox {
  background-color: white;
  width: 150px;
  height: 100px;
  border: 6px solid black;
  writing-mode: sideways-lr;
  display: flex;
  align-items: end;
}

@supports (writing-mode: sideways-lr) {
  .disclaimer {
    display: none;
  }
}

<div class="aboutbox">ABOUT</div>
<p class="disclaimer">Your browser does not support <code>writing-mode: sideways-lr;</code>, forget it !</p>

Answer 3

Рассмотрим отступы вместо настройки ширины:

.aboutbox {
  padding-right: 120px;
  height: 100px;
  border: 6px solid black;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

<div class="aboutbox">ABOUT</div>