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

这是一个技巧

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

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

如果这段代码弄乱了你的设计，你可以aside用 a包装你的。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;

允许长单词能够中断并换行到下一行。然而，word-wrap:break-word 是 CSS3 规范的一部分，并不是在所有浏览器中都兼容。

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

jsFiddle here