Как выровнять текст по вертикали

Question

у меня есть текст внутри <aside></aside> тега, и теперь он появляется как этот

This is the text in <aside> 

Я хочу, чтобы она выглядела по вертикали, как этот

T 
h 
i 
s 

i 
s 

t 
h 
e 

t 
e 
x 
t 

я использую это CSS

код:

aside { 
    background: none repeat scroll 0 0 #475E80; 
    height: 690px; 
    position: relative; 
    width: 20px; 
    text-align:bottom; 
} 

Как я могу это сделать?

Answer 1

Попробуйте добавить word-wrap собственности. Ваш CSS должен выглядеть следующим образом:

aside { 
    background: none repeat scroll 0 0 #475E80; 
    height: 690px; 
    position: relative; 
    width: 0; 
    word-wrap: break-word; 
} 

Вот пример: http://jsfiddle.net/CkAFs/1/

Вы также можете использовать word-break: break-all но выше решение слегка лучше поддерживается браузерами. Вот ссылка: http://caniuse.com/#search=word- (обратите внимание, что свойство overflow-wrap является псевдонимом для word-wrap).

Answer 2

Это трюк

aside { 
    width: 1px; 
    word-break: break-all; 
} 

Демо: http://jsfiddle.net/zu8QQ/

Вы можете обернуть ваш aside с div, если этот код испортил ваш дизайн.

Answer 3

У вас есть много трюков по этой ссылке http://net.tutsplus.com/tutorials/html-css-techniques/the-easiest-way-to-create-vertical-text-with-css/

Важным в этом примере word-wrap: break-word;

Разрешить длинные слова, чтобы быть в состоянии сломать и обернуть на следующую строку. Однако word-wrap: break-word является частью спецификации CSS3 и не соответствует всем браузерам.

aside { 
    width: 20px; 
    font-size: 50px; 
    word-wrap: break-word; 
} 

jsFiddle here