如何垂直对齐文本

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

这是一个技巧

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

演示：http://jsfiddle.net/zu8QQ/

如果此代码搞砸了您的设计，您可以使用aside包裹div。

Answer 2

尝试添加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 3

此链接上有很多技巧http://net.tutsplus.com/tutorials/html-css-techniques/the-easiest-way-to-create-vertical-text-with-css/

此示例中的重要内容是word-wrap: break-word;

  

允许长词能够打破并换行到下一行。但是，自动换行：break-word是CSS3规范的一部分，并不符合所有浏览器的要求。

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

jsFiddle here