如何对齐文本垂直

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