css - 如何让文本在 CSS 中从上到下运行？

Question

有谁知道如何使文本在 div 中从上到下对齐。

所以甚至都不让我演示。 . .我只希望字母在页面下方以垂直线相互堆叠，就像建筑物的故事一样。希望我不需要用图像来做。

Answer 1

让你的文字沿着垂直线运行，没有 HACKS

书写模式

CSS writing-mode attribute 让您的文本垂直运行。

.traditional-vertical-writing
{
  writing-mode: vertical-rl;
}

<p class="traditional-vertical-writing">
  This text runs vertically.<br>
  『只是』 （(but the thing is)），since Latin alphabets are not for vertical writing,
  not only the lines but each of the non-vertical-writing letters also gets rotated.<br>
  0123456789
</p>

---

文本方向

如果您不希望非垂直书写的字母在垂直线上旋转，您也可以使用 CSS text-orientation attribute。

.vertical-writing
{
  writing-mode: vertical-rl;
  text-orientation: upright;
}

<p class="vertical-writing">
  This text runs vertically.<br>
  『それに』 （(and in addition)）、now you don't have to turn your head 90 degrees clockwise
  to read these non-vertical-writing letters!<br>
  0123456789
</p>

---

如果您要进行一些tate-chuu-yoko ^{[1] [2] [3]} (在垂直书写的同时进行一些水平书写)，

考虑使用 text-combine-upright 。