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?
+2
A:
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
Knu
2010-03-24 15:13:32
Did not work I'm afraid. :(
Confused
2010-03-24 15:14:36
try with 0.9em and add a space between each letter (or use a custom letter-spacing) // check my update
Knu
2010-03-24 15:19:39
Yes well a space between each letter kind of defeats the whole purpose, of course it'll work with a space between each letter. :(
Confused
2010-03-24 15:23:01
Did you try to combine it with "word-wrap: break-word"? Note that this will only work in IE and CSS3-compatible browsers.
Prutswonder
2010-03-24 15:25:52
@pruts edited before seeing your comments ^^
Knu
2010-03-24 15:27:49
That worked, very nice. Thank you!
Confused
2010-03-24 15:36:32
(click on the checkmark to accept the answer)
Knu
2010-03-24 15:43:27
+1
A:
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.
swestrup
2010-03-24 15:31:59
+1
A:
.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);
}
Victor Jalencas
2010-03-24 15:47:38