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

Question

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

所以我甚至不会让我证明这一点...我只是希望这些字母在页面的垂直线上叠加在一起,就像建筑物的故事一样.希望我不需要用图像来做.

Answer 1

在保持正常方向的同时使字母从上到下,如下所示:

F

Ø

Ø

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 2

让您的文字沿垂直线顺畅运行

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 3

HTML:

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

CSS:

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