How to create vertical text using only CSS?

问题

Is it possible to create vertical text using only CSS, compatible with IE6+?

By vertical I mean

F
O
O

B
A
R

回答1:

Edited: You can try the following:

p {
  letter-spacing: 1000px;    // more than width of parent 
  word-wrap: break-word;    // seems to work in at least Firefox and IE7+ 
}

This seems to work in Firefox 3.5 and IE7+ (don't have access to IE6 right now). The only thing that is missing from that solution is an extra new line for a space, the result is something like:

F
O
O
B
A
R

回答2:

Today it is not possible in a browser agnostic way. Wait for CSS3.

回答3:

This works in IE, but unfortunately not FF:

.verticaltext 
{
    writing-mode: tb-rl;
    filter: fliph flipv;
}

回答4:

You can achieve something similar (at least in IE) using this CSS:

.verticaltext {
  writing-mode: tb-rl;
}

But this will rotate the characters by 90 degrees clockwise.

来源：https://stackoverflow.com/questions/1451617/how-to-create-vertical-text-using-only-css