Solved

CSS text overflow flexible columb width

Posted on 2006-07-08
3
709 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
3 Comments
 
LVL 3

Accepted Solution

by:
mdg12 earned 250 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

867 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now