如何對齊文本垂直

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