html - 如何在框中以正确的大小放置文本，垂直输入？

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

考虑填充而不是设置宽度:

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

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