Tue, 2005-08-09 21:59
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
Tue, 2005-08-09 23:45
#1
"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
Tue, 2005-08-09 23:52
#2
"Smart" overflow height possible?
That works absolutely perfect! Thank you so very much, you're a life saver.
Tue, 2005-08-09 23:53
#3
"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]
Wed, 2005-08-10 00:02
#4
"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).