css - 如何垂直对齐文本

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 的别名)。