Topic awaiting preservation: Dynamically hiding text too long for a table column? (Page 1 of 1)

Hello,

If anyone uses GMail in IE, it does this unique effect when you shrink your browser; if the subject column is too long to display, it will put a "..." over the content, and hide it. I know how to pull off hiding overflow text on a table cell-- that's easy. But how are they accomplishing the dynamic "..." ? I'm totally confused. Any help would be appreciated!

I would suspect they're doing some parsing of the TD widths, assuming they're fixed-width (or calculating this on window.resize, though TDs I thought by default are fluid.. anyways..)

Once the width is determined, however they decide to do that, they likely just parse out the length of the text inside the TD. If it's too long, truncate it at a certain number.

It could be character counting, possibly - it's kind of a complex-sounding problem as you're dealing with fluid TD items (presumably), as well as trying to find the width of a text node. I don't think there's any magic-bullet-type solution to it.

(Edited by Scott on 03-04-2005 17:33)

They use an IE only feature : the text-overflow:ellipsis;.

I second Scott in saying it is possible to do in plain JS, but the solution would be incredibly complex for such a simple ( in appearance ) feature.

You guys rock. I got it working now Thanks!

... and sometimes they even roll

: . . DHTML Slice Puzzle : . . .

I would imagine that the plain JS method would never work properly as most fonts dont have a fixed width and the user can make the text larger or smaller.

What a nice feature, unfortunatly its IE only so therefore its actually an awful non-standard feature never to be used.

It could be done by overlaying an image or Div containing "..." and placing it at the end of the div/td using overflow:hidden; but then guessing if the the "..." is required or not would be just as haphazard as the first method, unless the attribute of overflow can tell you more information than I know of (i.e tell you if the hidden is involked or not.).

Or you could do the hiding manually using clip, then if the width exeeds the set clipping area you add the "...".

We're not playing dices when determining the width of an HTML element containing a string.
Thanks to the offsetWidth property we know the exact size in pixels of an the HTML element, and that whatever the user sets as default or current text size, therefore we can use a dichotomic method to quickly get as close as possible to a desired width and add the "...".

Such method have been used on some online newspapers to put a whole article on several columns. It's a piece of cake if you have some plain text but becomes tricky when you deals with formatting gizmos ( strong, em, ... ) and links. Finally it's a nightmare if you also have to deal with images.