4 replies [Last post]
MikeDeuce
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2005-08-09
Posts: 6
Points: 0

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 hours 43 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

&quot;Smart&quot; 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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

MikeDeuce
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2005-08-09
Posts: 6
Points: 0

&quot;Smart&quot; overflow height possible?

That works absolutely perfect! Thank you so very much, you're a life saver.

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 11 years 45 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

&quot;Smart&quot; 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! Shock Gary beat me to it! People are too fast around here... Sad [/edit]

MikeDeuce
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2005-08-09
Posts: 6
Points: 0

&quot;Smart&quot; 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 Smile I tend to use the name on online games and thought it would be a fun domain (no disprect intended to vulva-equipped members).