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

Question

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

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

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/自动换行

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>