如何垂直对齐文本

Question

i have a text inside the <aside></aside> tag and now it is appearing like this

This is the text in <aside>

I want to make it look vertical like this

T
h
i
s

i
s

t
h
e

t
e
x
t 

i am using this css

code:

aside {
    background: none repeat scroll 0 0 #475E80;
    height: 690px;
    position: relative;
    width: 20px;
    text-align:bottom;
}

How can i do this?

Answer 1

This is a trick

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

Demo: http://jsfiddle.net/zu8QQ/

You can wrap your aside with a div if this code messed up your design.

Answer 2

Try adding word-wrap property. Your CSS should look like this:

aside {
    background: none repeat scroll 0 0 #475E80;
    height: 690px;
    position: relative;
    width: 0;
    word-wrap: break-word;
}

Here's an example: http://jsfiddle.net/CkAFs/1/

You could also use word-break: break-all but the above solution is slightly better supported by the browsers. Here's the reference: http://caniuse.com/#search=word- (notice that overflow-wrap property is the alias for word-wrap ).

Answer 3

You have many tricks on this link http://net.tutsplus.com/tutorials/html-css-techniques/the-easiest-way-to-create-vertical-text-with-css/

The important in this example is word-wrap: break-word;

Allow long words to be able to break and wrap onto the next line. However, word-wrap: break-word is part of the CSS3 specification, and is not compliant across all browsers.

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

jsFiddle here