css - CSSでテキストを上から下に実行する方法は?

Question

divでテキストを上から下に揃える方法を知っている人はいますか?

SO は私にそれを実演させません。. . 建物の物語のように、ページの下に垂直に文字を積み重ねていきたいだけです。画像でそれを行う必要がないことを望んでいました。

Answer 1

ハックせずに縦線に沿ってテキストを実行する

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>

---

また、縦中横^{[1] [2] [3]} (縦書き中に少し横書き) を行う場合は、

使用をご検討text-combine-uprightください。

Answer 2

HTML：

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

Css：

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

Answer 3

フォントサイズに応じて、それに応じて調整します。

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