I'm working on a directory that I want to be compatible with all resolutions. I'm looking for a script that can hide content that wont fit the screen (browser) width without scrolling horizontally or making a new line (replace it with "..."). And of course the javascript uses <a to un-hide the hidden content on the following line.

Very similar to GMail actually, I just have no clue how to make it happen.
Heres an example page I created to illustrate what I'm saying:
http://www.mylinuxisp.com/~chrisl/example.htm

Thanks,
Chris

You will be struggling to do that with javascript without it being very slow and a little disconcerting for users, as the page would have to first load all the data and then parse each of the elements and collapse it.

A server side solution would be better for that scenario with showing a fixed length snippet then a 'read more...' link.

A client-side method would be to use CSS to set the element height with overflow:hidden and have a "expand" link/image at the top. The click would then change the style to allow the element to expand in similar fashion to this menu.

No, I was not referring to a fixed width; my example was obviously inaccurate.

For now, completely disregard the "show hidden content" part.
Lets say a table's width was 100% and the viewer was running 800x600.
There are 5 tds in the table, none a fixed width, and 4 of them happen to have the exact same content and therefore are all 160px width each.
Then lets say the 5th td's content (text) is 200px wide. There is only 160px left, so the 40px of content that wont fit (without scrolling or a new line) can be "hidden" (at this point without any intent of un-hiding it) and "..." added in its place.

This couldn't be something the server does because the client would be resizing the browser on their end.

Please correct me if I misunderstood you.
Thanks,
Chris

Given that info it can't be done


1/ Tables are only rendered by the browser when the final </table> tag is read so by that point all the content is loaded and in place.

2/ Unless sizes are explicitly set on elements the DOM does not know the actual pixel size of any elements.

3/ Not all fonts and characters are the same pixel width.

Yes, yes, I know; just another bad example.

You must still be misunderstanding me; Gmail is doing almost exactly what I'm trying to do - so I know it's possible, I just couldnt find out how in their maze of javascript.

If you have a Gmail account, just log on and look at the second column.
(sender | subject - bodybodybodybodybody... | date)
^^ the "subject - body preview" ^^

Then resize the browser to be smaller; it cuts off text that wont fit. Maximize the browser again and it shows it. All happening on one row.

weee....

It ain't done with javascript. It's an ActiveX component that bypasses the browser DOM. that's why you get the Loading... message first

Look at it in basic HTML