RSS

Vertical Text with CSS

27 Feb

You may looking for how to write vertical text with CSS. I was also looking for this some days before. After searching on google I found the solution how to make vertical text with CSS properties.

Vertical Text with CSS

Vertical Text with CSS

This is tested on Opera 10.5, Firefox 10.0, IE8+ and Webkit based browsers (Safari, chrome etc), so that is pretty encompassing.

This is the HTML markup text

This is a vertical text.

Here is the CSS class property for vertical text with css

.vertical-text{
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
writing-mode:tb-rl;
white-space:nowrap;
width: 20px;
}

Line 1: For webkit browsers like Safari, Chrome etc.
Line 2: For Mozilla Firefox
Line 3: For Opera
Line 6: For IE
You need to definately specify the CSS white-space and width property to make the text vertical.

Advertisements
 
2 Comments

Posted by on February 27, 2012 in Uncategorized

 

Tags: ,

2 responses to “Vertical Text with CSS

  1. Mathieu

    April 5, 2018 at 4:08 pm

    Thank you for your post ! but after the copy of the CSS, how can i do ?

     
    • Jilani Jidni

      April 5, 2018 at 7:48 pm

      You need to add *vertical-text* class in your text container

       

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

 
%d bloggers like this: