challenge: auto-clipping text on resize

[humbads]

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.

 

[Steve Pugh]

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

 

[Greg N.]

I want to achieve the effect described below using HTML and CSS...

<div style="position:relative; height:1.5em;">

<div style="position:absolute; overflow:hidden;
text-align: center; left:0%; width:25%;">Text&nbsp;sample&nbsp;one
</div>

<div style="position:absolute; overflow:hidden;
text-align: center; left:25%; width:25%;">Text&nbsp;sample&nbsp;two
</div>

<div style="position:absolute; overflow:hidden;
text-align: center; left:50%; width:25%;">Text&nbsp;sample&nbsp;three
</div>

<div style="position:absolute; overflow:hidden;
text-align: center; left:75%; width:25%;">Text&nbsp;sample&nbsp;four
</div>

</div>

 

[Mitja Trampus]

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

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|

Just use overflow:hidden to achieve the clipping. In order
to assure cells are equally wide, use table-layout:fixed.
As Steve and Greg suggested, it might be better to use DIVs
unless your data really is tabular.

<style>
td {white-space:nowrap;border:solid black 1px;
text-align:center; overflow:hidden}
table {table-layout:fixed; width:100%}
</style>

<table>
<tr>
<td>some text here</td>
<td>and some more in the second cell</td>
<td>this is shorter</td>
<td>shortest</td>
</tr>
</table>

HTH
Mitja

 

[Shailesh Humbad]

Just use overflow:hidden to achieve the clipping. In order to assure
cells are equally wide, use table-layout:fixed.
As Steve and Greg suggested, it might be better to use DIVs unless your
data really is tabular.

<style>
td {white-space:nowrap;border:solid black 1px; text-align:center;
overflow:hidden}
table {table-layout:fixed; width:100%}
</style>

<table>
<tr>
<td>some text here</td>
<td>and some more in the second cell</td>
<td>this is shorter</td>
<td>shortest</td>
</tr>
</table>

HTH
Mitja

Thanks. That really helps. I was unfamiliar with the overflow settings.
Your example works in FF1.5, IE6, and opera 8.5, which is good enough
for my internal application. This is for a navigation bar containing
links in a fixed-height frame along the top of the window. When in
800x600, the horizontal scroll bar was being displayed, which was
obscuring most of the buttons. I didn't want to disable the scroll bar,
and users of my app. are not sophisticated enough to know about resizing
frames. So I think this will work best.