Hi all!
I have auto generated numbers that I need to vertically align, instead of
367
I would like it to display
3
6
7
Any suggestions how to do that with just css? It is not possible to add a space into the number to be able to use a line break.
Thanks!
U
n
c
l
e
6
8
;)
Couldn’t you use a plugin to add the spaces? What if you put it in a fixed-width table cell and define it to wrap? I seem to remember doing this in a table once...
Or you could use the CAPTCHA library to create an image on the fly with the numbers lined up vertically (OK that’s a little crazy, but sometimes when there’s a deadline looming things seem less crazy than they might when we’re thinking clearly).
Here is a situation where IE (since 5.5 I think) is ahead of the curve, since this is an effect that it can handle in pure CSS.
Well, if he can insert any code in between the numbers (spans, ems, or anything else), then yes that’s an excellent implementation of vertical text (CSS Play rules). But it sounds as if he can’t, since he can’t even insert spaces. But if you’re reconsidering that requirement Uncle68, then this is a good quick solution (just write a simple snippet or plugin to parse your text on output).
This works;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
.numberIn{
display:block;
}
.numberIn li{
list-style: none;
}
</style>
</head>
</div>
<body>
<div class="numberIn">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li></li>
</ul>
</body>
</html>
You have to get your data into the li tages.
Cheers,
Hal D
"Today’s headlines are nothing more than whispers of history"
Somehow I missed posting this;
HalD
"Today’s headlines are nothing more than whispers of history"
Just clips it so I only see the first letter...
