• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 724
  • Last Modified:

CSS text overflow flexible columb width

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
loving_chronic
Asked:
loving_chronic
1 Solution
 
mdg12Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now