CODEWITHSUNDEEP
css
Confused
Confused

Reputation: 21

Vertically flowing text with css

I would like to have a div with some text in it. But I'd like the text to flow vertically instead of horizontally. Like this;

M

y

t

e

x

t

Any ideas on how to accomplish this with CSS?

Upvotes: 2

Views: 1344

Answers (4)

Krishnamoorthy Acharya
Krishnamoorthy Acharya

Reputation: 4254

div{
  text-orientation: upright;
  writing-mode: vertical-lr;
 }
<div>Jelly</div>

Please find the answer here you can use text-orientation and

Upvotes: 1

Victor Jalencas
Victor Jalencas

Reputation: 1246

.yourtext { -moz-transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
            -moz-transform-origin: top right;
            -webkit-transform-origin: top right;
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Upvotes: 0

swestrup
swestrup

Reputation: 4209

CSS3 has a proposed 'writing-mode' attribute that can be set to 'tb-lr' (write text from top to bottom, write lines from left to right), but I don't know if any browsers support it yet, so its not something to rely on.

Upvotes: 1

Knu
Knu

Reputation: 15134

If you have only one line of text you could try using width:1em;letter-spacing:1px (and a space between each letter)

edit: if you want to use no space between each letter width:1em;letter-spacing:1em;word-wrap:break-word

Upvotes: 5

Related Questions