Stylesheets - ellipses in a div / table that cut off too long text (and resize with changing widths)

Author

ellipses in a div / table that cut off too long text (and resize with changing widths)

jawolter@gmail.com

2005-12-23, 3:32 am

I have a div that uses the
overflow:hidden;text-overflow:eillipsis;white-space:nowrap css tags.
This holds a very long line of text which fills any percentage of the
screen's width. If I make the screen more narrow--less of the line of
text shows, and dot dot dot shows at the end to indicate more text is
in the line.

</div>
<div STYLE="clear:none;width:45%;white-space:nowrap;border:thin solid
black;overflow:hidden;text-overflow:ellipsis;margin:2px;"> As you can
see, this would work very well in the interface, and as more browsers
support it, could easily become the preferred presentation style for
users. </div>
</div>

Due to previous (poor) design decisions, these lines of text must be in
a table cell. My idea was if the table cell was 35% of the page and I
could put a div inside it and fiddle with the div's width and
everything would work. However it does not work.Can anyone help?

I've tried the following:

<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="20%">dsdsjdkfjasldfjlas</td>
<td width="80%"><div
STYLE="white-space:nowrap;overflow:hidden;text-overflow:ellipsis"> As
you can see, this would work very well in the interface, and as more
browsers support it, could easily become the preferred presentation
style for users. </div></td>
</tr>
</table>

Jukka K. Korpela

2005-12-23, 6:28 am

jawolter@XXXXXXXXXX wrote:

> I have a div that uses the
> overflow:hidden;text-overflow:eillipsis;white-space:nowrap css tags.

I'm not surely whether this is a good idea even in a situation where the
nonstandard text-overflow property is supported by a browser. It is not
crystal clear to users what's going on.

> Due to previous (poor) design decisions, these lines of text must be in
> a table cell. My idea was if the table cell was 35% of the page and I
> could put a div inside it and fiddle with the div's width and
> everything would work.

When using the technique inside a cell, you need
table-layout: fixed
for the table, in addition to setting widths for cells. (Without it, the
width settings are just suggested minimum widths.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/