Posted by Steve Pugh on 02/15/06 14:00

humbads wrote:
> 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.

Tables actually make this trickier, the following works in FF1.5, Opera
8.5 and IE5.5.

<style type="text/css">
div {float: left; width: 25%; }
div div {width: 100%; float: none; overflow: hidden; white-space:
nowrap; border-right: 1px solid black; padding: 0.1em; text-align:
center;}
div.first {border-left: 1px solid black;}
</style>

<div><div class="first">Text One</div></div>
<div><div>Text Two</div></div>
<div><div>Text Three</div></div>
<div><div>Text Four</div></div>

If your content really is a table then it becomes a bit trickier and
I've not yet managed to get a working solution.

Steve


Steve

[Back to original message]