CODEWITHSUNDEEP
csshtml
MintY
MintY

Reputation: 643

How to align text vertically

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?

Upvotes: 0

Views: 84

Answers (3)

matewka
matewka

Reputation: 10168

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).

Upvotes: 3

Donovan Charpin
Donovan Charpin

Reputation: 3397

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

Upvotes: 1

Tony Dinh
Tony Dinh

Reputation: 6726

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.

Upvotes: 3

Related Questions