Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS text overflow flexible columb width

Posted on 2006-07-08
3
Medium Priority
?
722 Views
Last Modified: 2012-05-05
recently i was trying to make columb for a bulk text which needs to get hidden like the gmail subject
i used

overflow:hidden;white-space:nowrap;
 
which works perfectly in firefox...but to make it work in IE and firefox i need to use

text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:300px;

which again works fine in both but then i dont have a flexible width...for which i tried width:100%; instead of width:300px; but this dosnt work in IE.

can anyone tell me how to emulate the gmail subject columb?
0
Comment
Question by:loving_chronic
1 Comment
 
LVL 3

Accepted Solution

by:
mdg12 earned 1000 total points
ID: 17066973
I noticed that gmail handles the onresize event -- not sure exactly what they're doing but they could be dynamically resizing the cell in IE..  I looked at the style in Firefox (using FireBug inspector) and there was nothing special going on, but it could be a totally different css for IE

You could try something like the following (but add a check and only do it for IE, because onresize is triggered only when resizing is finished in Firefox so it would be "sluggish")

<html>
<head>
<script>
function scale()
{
var newwidth = document.body.clientWidth-20; //20 for scrollbar
document.getElementById('div1').style.width = newwidth;
}
</script>
</head>
<body onload="scale()" onresize="scale()">
<div id="div1" style="overflow:hidden;white-space:nowrap">this is a lot of textthis is a lot of textthis is a lot of textthis is a lot of textthis is a lot of textthis is a lot of textthis is a lot of textthis is a lot of textthis is a lot of textthis is a lot of text</div>
</body>
</html>
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Over time, the online landscape has altered considerably, but that’s nothing compared to the up-and-coming trends that will shape the web design industry in the coming year. Keep reading to find out which trends will shape B2B web design in 2018.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses
Course of the Month12 days, 1 hour left to enroll

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question