如何在 CSS 中使文本从上到下运行？

Question

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

SO甚至不让我演示它。 。 。我只是希望这些字母在页面上垂直排列，就像建筑物的故事一样。希望我不需要用图像来做。

Answer 1

让您的文本沿着垂直线运行，而不需要黑客

writing-mode

CSS

writing-mode

属性 让您的文本垂直运行。

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

---

text-orientation

如果您不希望非竖写字母在竖线上旋转，您也可以使用 CSS

text-orientation

属性。

.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

。

Answer 2

要使字母从上到下同时保持其正常方向，如下所示：

F

O

O

HTML：

<div class="toptobottom">letters</div>

CSS：

.toptobottom{
  width: 0;
  word-wrap: break-word;
}

自动换行允许单词在中间断开，因此这将使字母从上到下。它也得到了很好的支持：https://developer.mozilla.org/en-US/docs/CSS/word-wrap

Answer 3

Html：

<div class="bottomtotop">Hello!</div>

CSS：

.bottomtotop { transform:rotate(270deg); }

Answer 4

这是我用过的，它对我有用：

CSS

.traditional-vertical-writing
 {
   writing-mode: vertical-rl;
   transform:rotate(180deg);
 }

HTML，记得将文本放在

标签中

<th rowspan="2" class="text-sm"><p class="traditional-vertical-writing">S/N</p></th>

结果

Answer 5

NJCodeMonkey 的答案很接近。

对我来说，我必须使用

word-break

。与 word-wrap:break-word;有点不同

所以它看起来像这样。

HTML：

<div class="VerticalText">LongTextWithNoSpaces</div>

CSS：

.VerticalText
{
   width: 1px;
   word-break: break-all;
}

这在 Firefox 24、IE 8 和 IE 11 中对我有用。

Answer 6

根据您的字体大小，进行相应调整：

<div style='width:12px'>a b c d</div>