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

Question

有没有人知道如何使文本在div中垂直顶部对齐。

甚至SO都不允许我演示...我只想让字母在页面上垂直排成一条线，就像建筑物的故事一样。希望我不需要用图像来实现它。

- Robust

Answer 1

不使用hack让您的文本沿垂直线运行

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>

---

如果你需要在竖排文字的同时进行一些横向书写，可以考虑使用 text-combine-upright。

tate-chuu-yoko^[1][2][3]是指在竖排文字时进行一些横向书写。

- Константин Ван

---

关于如何将列反转，使第一个字母出现在左侧，我不知道。如果您知道，请在下面评论。 - Константин Ван

使用 vertical-lr 代替 vertical-rl 可以使列从左到右排列。 - Αμηλωρε

这是页面上适用于传统日语文本的唯一解决方案。谢谢！ - Ann Kilzer

Answer 2

为了让字母从上到下排列，但保持它们的正常方向，如下所示：

F

O

O

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

- NJCodeMonkey

---

谢谢！我发现开发日语网站总是让我们回到基础。 - Gregordy

Answer 3

Html:

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

Css:

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

- Berker Yüceer

---

使用 transform 属性可以让文本从容器之外流出。 - Amit Kumar Gupta

它改变了字母的方向，这在问题中是不必要的。 - Danish Adeel

Answer 4

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

CSS

.traditional-vertical-writing
 {
   writing-mode: vertical-rl;
   transform:rotate(180deg);
 }

HTML, Remember to put your text in

tag

<th rowspan="2" class="text-sm"><p class="traditional-vertical-writing">S/N</p></th>

RESULTS

- Kamaro

Answer 5

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上有效。

- Dan

Answer 6

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

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

- Diodeus