如何垂直对齐文本

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;

允许长的单词能够折断并换行到下一行。 但是，自动换行：断行是CSS3规范的一部分，并非在所有浏览器中都兼容。

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

jsFiddle在这里