Posted by humbads on 02/15/06 13:22

I want to achieve the effect described below using HTML and CSS. I
think it may be rather challenging to implement, and I haven't been
able to figure it out yet.

Consider a table with four cells in a single row. Suppose its width is
set to 100%. In each of the cells, there is a small bit of centered,
non-wrapping text (in a div or a link, for instance). Here is some
sample code:

<table border="2" width="100%">
<tr>
<td nowrap align=center><div>Text One</div></td>
<td nowrap align=center><div>Text Two</div></td>
<td nowrap align=center><div>Text Three</div></td>
<td nowrap align=center><div>Text Four</div></td>
</tr>
</table>

Normally, when the browser window is widened, each cell also widens by
the same amount evenly, and the text automatically appears padded,
something like this:

| Text One | Text Two | Text Three | Text Four |

When the browser window is narrowed, each cell also narrows, until it
reaches the width of the cell content, becoming something like this:

|Text One|Text Two|Text Three|Text Four|

When the browser is narrowed smaller than the width of all the text,
the table stops getting narrower, and the text on the far right becomes
hidden off the edge of the window.

The effect I would like to achieve is automatic clipping of the text
when the window is narrowed. This way, none of the cells become hidden
when the browser window is narrow. The content of each cell would be
left-aligned and clipped instead, something like this:

|Text On|Text Tw|Text Th| Text Fo|

Upon further narrowing, the text would become:

|Te|Te|Te|Te|

At its narrowest point, the table would appear empty, like this:
||||

Can anyone figure out a way to achieve this using HTML and CSS? You can
use images with text in place of actual text, but avoid this if
possible. If there is no way in HTML/CSS, then suggest a way in
Javascript.

[Back to original message]