?
Solved

CSS text overflow flexible columb width

Posted on 2006-07-08
3
Medium Priority
?
718 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
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

Is Your Team Achieving Their Full Potential?

74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.

With new material every week, we'll make sure that you stay ahead of the game.

Question has a verified solution.

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

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 …
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Suggested Courses

762 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