So I bet the main problem here is that I'm not using overflow correctly, but here's the situation:
http://ironvulva.com/troubleshoot/overflow.html
Or code if you prefer:
<div style="width: 100px; height: 24px; font:bold 10px verdana, helvetica; overflow: hidden;"> Item #1, long name product that keeps going and going and needs to be truncated. </div> <div style="font:bold 10px verdana, helvetica; color:#ff0000;">Item Price</div> <p> <div style="width: 100px; height: 24px; font:bold 10px verdana, helvetica; overflow: hidden;"> Item #2, short </div> <div style="font:bold 10px verdana, helvetica; color:#ff0000;">Item Price</div>
All styles added inline for convenience in the above example.
I want the overflow:hidden to kick in at around 24px to make the items in black truncate after 2 lines. Only problem is, sometimes the items only require one line and I'm left with white space (see item #2). I've been searching all day but can't seem to come up with a solution.
FWIW the items come from a database I do not control, so I have to figure out a method to truncate only in CSS, but without the white space. I want the "Item price" to butt up against the Item above it, but obviously the set height won't allow it.
Any ideas?
Thanks a lot!
-mike
"Smart" overflow height possible?
In modern browsers, that's simple, div {max-height: 24px;}. You probably have IE users, though, so something else is needed.
IE's proprietary expression value might do the job.
<div style="height: expression(this.scrollHeight > 24? '24px' : 'auto');"}
It seems to work in limited testing. Someone else will have to come up with the right expression to abstract the rule to a style sheet. The whole thing would be;
<div style="width: 100px; max-height: 24px; height:expression( this.scrollHeight > 24? '24px' : 'auto' ); font:bold 10px verdana, helvetica; overflow: hidden;"> Item #1, long name product that keeps going and going and needs to be truncated. </div> <div style="font:bold 10px verdana, helvetica; color:#ff0000;"> Item Price </div>
cheers,
gary
"Smart" overflow height possible?
That works absolutely perfect! Thank you so very much, you're a life saver.
"Smart" overflow height possible?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> body { font-family: verdana,helvetica; font-size: 10px; font-weight: bold; } .name { width: 100px; max-height: 24px; overflow: hidden; } .price { color: rgb(255, 0, 0); margin-bottom:20px; } </style> <!--[if gte IE 5]> <style type="text/css"> .name { height:expression(this.scrollHeight > 24? "24px" : "auto" ); } </style> <![endif]--> </head> <body> <div class="name"> Item #1, long name product that keeps going and going and needs to be truncated. </div> <div class="price">Item Price</div> <div class="name"> Item #2, short </div> <div class="price">Item Price</div> </body> </html>
By the way, what exactly will 'ironvulva' be about?
[edit] D'oh! Gary beat me to it! People are too fast around here...
[/edit]
"Smart" overflow height possible?
Thank you very much for also taking the time for such a detailed response. You folks are incredible.
ironvulva is just a personal-joke named domain with no real purpose I tend to use the name on online games and thought it would be a fun domain (no disprect intended to vulva-equipped members).