如何使文本在 CSS 中从上到下运行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/510068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make text run top-to-bottom in CSS?
提问by Kenneth Johns
Does anyone know how to make text align top-to-bottom in a div.
有谁知道如何使文本在 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.
所以甚至不会让我演示它。. . 我只是想让字母在页面上垂直排列，就像建筑物的故事一样。希望我不需要用图像来做。
回答by Константин Ван
Having your text run along vertical lines WITHOUT HACKS
让您的文本沿垂直线运行，无需破解
writing-mode
writing-mode
CSS writing-modeattributelets your text run vertically.
CSSwriting-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
text-orientation
If you don't want non-vertical-writing letters to rotate themselves in vertical lines, you may use CSS text-orientationattributeas well.
如果您不希望非垂直书写的字母在垂直线上旋转，您也可以使用CSStext-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>And if you're to do some tate-chuu-yoko[1][2][3](a bit of horizontal writing while writing vertically),
如果你要做一些tate-chuu-yoko [1] [2] [3]（垂直书写时有点水平书写），
consider using text-combine-upright.
考虑使用text-combine-upright.
回答by NJCodeMonkey
To make the letters top-to-bottom while keeping their normal orientation, like this:
在保持正常方向的同时使字母从上到下，如下所示：
F
F
O
哦
O
哦
HTML:
HTML：
<div class="toptobottom">letters</div>
CSS:
CSS：
.toptobottom{
width: 0;
word-wrap: break-word;
}
word-wrap allows words to be broken in the middle, so this will make the letters top-to-bottom. It's also really well supported: https://developer.mozilla.org/en-US/docs/CSS/word-wrap
word-wrap 允许单词在中间被打破，所以这将使字母从上到下。它也得到了很好的支持：https: //developer.mozilla.org/en-US/docs/CSS/word-wrap
回答by Berker Yüceer
Html:
网址：
<div class="bottomtotop">Hello!</div>
Css:
css：
.bottomtotop { transform:rotate(270deg); }
回答by Diodeus - James MacFarlane
Depending on your font size, adjust accordingly:
根据您的字体大小，进行相应调整：
<div style='width:12px'>a b c d</div>
回答by Dan
NJCodeMonkey's answer was close.
NJCodeMonkey 的回答很接近。
For me I had to use word-break. It's a little differentfrom word-wrap:break-word;
对我来说，我不得不使用word-break. 这是一个有点不同，从word-wrap:break-word;
So it would look like this.
所以它看起来像这样。
HTML:
HTML：
<div class="VerticalText">LongTextWithNoSpaces</div>
CSS:
CSS：
.VerticalText
{
width: 1px;
word-break: break-all;
}
This worked for me in Firefox 24, IE 8 and IE 11.
这在 Firefox 24、IE 8 和 IE 11 中对我有用。
