Vertical Text in HTML

This morning one of my junior asked me how to write vertically in HTML. So I thought to write something on this topic.

There are many ways to write vertically in HTML. You can use HTML tags , javascripts or CSS. But I (personally) like to use (and like to suggest) CSS for changing any style of HTML. 

For doing this you just need a CSS class. This class can be used HTML text holder. Here is the sample code for it. From this code you can see I used same CSS class in different text holder of HTML and it is working fine.

What I have done here is very simple. I have just created a div with very narrow width. This width is less than the font-size width of the text. You can set this width by percentage (eg. textNew ) or em (eg. text). I prefer em because it sets font size according to the element size.Then set word-break attribute to break-all. All done. After setting these attributes in your CSS file you will be able to see vertical words in HTML.