20

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

所以甚至不会让我演示它。. . 我只希望字母在页面下方垂直堆叠，就像建筑物的故事一样。希望我不需要用图像来做。

4

6 回答 6

35

让您的文本沿着垂直线运行而无需 HACKS

writing-mode

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

如果你不希望非垂直书写的字母在垂直线上旋转，你也可以使用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>

如果你要做一些tate-chuu-yoko [1] [2] [3]（垂直书写时有点横向书写），

考虑使用text-combine-upright.

于 2018-12-02T02:47:35.683 回答
13

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

F

○

○

HTML：

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

CSS：

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

word-wrap 允许单词在中间被打破，所以这将使字母从上到下。它也得到了很好的支持：https ://developer.mozilla.org/en-US/docs/CSS/word-wrap

于 2013-04-12T00:25:46.103 回答
5

html:

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

CSS：

.bottomtotop { transform:rotate(270deg); }
于 2012-09-05T12:25:14.940 回答
3

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

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>

结果 在此处输入图像描述

于 2020-09-26T09:15:35.987 回答
0

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 中对我有用。

于 2014-09-04T15:05:45.850 回答
-1

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

<div style='width:12px'>a b c d</div>
于 2009-02-04T04:35:41.927 回答