如何使文本在CSS中自上而下运行? [英] How to make text run top-to-bottom in CSS?

问题描述

有人知道如何使div中的文本从上到下对齐吗?

Does anyone know how to make text align top-to-bottom in a div.

所以，我什至不让我演示它. . .我只希望字母像页面中的故事一样沿着页面垂直向下堆叠.希望我不需要对图像进行处理.

SO won't even let me demonstrate it . . . I just want the letters to stack on top of each other in a vertical line down the page like the stories of a building. Was hoping I didn't need to do it with an image.

推荐答案

使文本沿垂直线运行而没有任何错误

writing-mode

CSS writing-mode属性可让您输入文本垂直运行.

Having your text run along vertical lines WITHOUT HACKS

writing-mode

CSS writing-mode attribute lets your text run vertically.

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

如果您不希望非垂直书写字母沿垂直线旋转，则可以使用

If you don't want non-vertical-writing letters to rotate themselves in vertical lines, you may use CSS text-orientation attribute as well.

.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 [3] (在垂直书写时有点水平书写)，

And if you’re to do some tate-chuu-yoko^[1][2][3] (a bit of horizontal writing while writing vertically),

考虑使用 text-combine-upright .

consider using text-combine-upright.

这篇关于如何使文本在CSS中自上而下运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！