How do I make text run top-to-bottom in CSS?

Question

Does anyone know how to make text align top-to-bottom in a 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.

Answer 1

Having your text run along vertical lines WITHOUT HACKS

writing-mode

CSS writing-mode attribute lets your text run vertically.

.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

If you don't want non-vertical-writing letters to rotate themselves in vertical lines, you may use CSS text-orientation attribute as well.

.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),

consider using text-combine-upright.

Answer 2

To make the letters top-to-bottom while keeping their normal orientation, like this:

F

O

O

HTML:

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

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

Answer 3

Html:

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

Css:

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

Answer 4

This is what I have used and it works for me:

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

Answer 5

NJCodeMonkey's answer was close.

For me I had to use word-break. It's a little different from word-wrap:break-word;

So it would look like this.

HTML:

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

CSS:

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

This worked for me in Firefox 24, IE 8 and IE 11.

Answer 6

Depending on your font size, adjust accordingly:

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