html页面vertical,html - Vertical Text Direction - Stack Overflow

I was searching for an actual vertical text and not the rotated text in HTML as shown below. So I could achieve it by using the following method.

HTML:-

Hi This is Vertical Text!

CSS:-

.vericaltext{

width:1px;

word-wrap: break-word;

font-family: monospace; /* this is just for good looks */

}

Update:- If you need the whitespaces to be displayed, then add the following property to your css.

white-space: pre;

So, the css class shall be

.vericaltext{

width:1px;

word-wrap: break-word;

font-family: monospace; /* this is just for good looks */

white-space: pre;/* this is for displaying whitespaces */

}

Update 2 (28-JUN-2015)

Since white-space: pre; doesnt seem to work (for this specific use) on Firefox(as of now), just change that line to

white-space: pre-wrap;

So, the css class shall be

.vericaltext{

width:1px;

word-wrap: break-word;

font-family: monospace; /* this is just for good looks */

white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/

}