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

Question

有没有人知道如何在div中将文本从上到下对齐。

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

Answer 1

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

˚F

0

0

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

<强> HTML

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

<强>的CSS：

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

Answer 3

使文本沿垂直线运行而没有乱码

POST

CSS writing-mode attribute使您的文本垂直显示。

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>

如果您不希望非垂直书写的字母以垂直线旋转，则也可以使用CSS text-orientation attribute。

text-orientation

.vertical-writing
{
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Answer 4

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

<div style='width:12px'>a b c d</div>

Answer 5

NJCodeMonkey的答案很接近。

对我来说，我必须使用word-break。它来自word-wrap:break-word;

little different

所以它看起来像这样。

HTML：

<div class="VerticalText">LongTextWithNoSpaces</div>

CSS：

.VerticalText
{
   width: 1px;
   word-break: break-all;
}

这在Firefox 24，IE 8和IE 11中对我有用。

Answer 6

这是我使用过的并且对我有用：

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>

结果