Menu
I can't believe no one ever asked this so I just assume I don't know the correct name for what I want. I'd like to have a text like jelly to be vertical aligned like this:
j
e
l
l
y
Is there a cross browser solution?
926
To make a vertical line, use border-left or border-right property. The height property is used to set the height of border (vertical line) element. Position property is used to set the position of vertical line. Example 1: It creates a vertical line using border-left, height and position property.
The first trick is to use writing-mode: vertical-lr to get the text to run vertically. By itself, the text runs top to bottom, but we want it to run bottom to top, so we spin it around it with the transform: rotate(180deg) . The default transform origin is the center of the element, so this works out great.
Here is an article that details several ways to accomplish this with both CSS and javascript along with the pros and cons of each.
http://net.tutsplus.com/tutorials/html-css-techniques/the-easiest-way-to-create-vertical-text-with-css/
Hope you find it useful.
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
