I'd like to display some text in a one-row-only table cell, not overflowing the containing text outside of the cell (or expanding the cell)
However, the cell itself "doesn't know its own width". And I don't know anything at all about the text that shall be displayed.
Today, I'm using something like the html below.
The "nowrap" together with the "overflow:hidden" makes the text display on one single row.
I don't know the size of the image to the right of the text, so I cannot say how wide the cell itself will be.
However, I know that the whole table shall be 500px wide. Thus, the image cell shall be "as small as possible" (just containing the image) and the text cell shall cover the rest of the table width (500px minus the image width)
If I change the span to <span style="overflow:hidden; width:350;"> -- then all is perfect. But I don't know what the proper width shall be here, as it depends on the (unknown) image.
And if I don't use a "width:xxx" then the cell will be expanded to contain all the text (on one row). Not good!
I've also tried to remove the "nowrap" and use a <span style="height:1.2em; overflow:hidden; word-wrap:break-word;">
Then the cell never expands, but instead my text will be cut off at a word break -- thus, the "last word" will not display at all, even though several characters should have fitted in the cell (I thought that "break-word" would do the trick, but obviously it doesn't)
Also, this method does not at all work with at least some non-IE browsers (like Firefox).
<table width=500 border=1 cellspacing=0 cellpadding=0><tr valign=top><td>
This is how wide the page should be (contained in the table below)
</td></tr></table>
<br>
<table width=500 style="width:500;" border=0 cellspacing=0 cellpadding=0><tr valign=top><td>
<table border=1 width="100%" border=0 cellspacing=0 cellpadding=0>
<tr valign=top>
<td>
<table border=1 border=0 cellspacing=0 cellpadding=0>
<tr valign=top>
<td nowrap>
<span style="overflow:hidden;">
Testing_long_words 1 testing_long_words 2 testing_long_words 3 testing_long_words 4 testing_long_words 5
</span>
</td>
</tr>
</table>
</td>
<td width="1%" align=right>
<img src="/somepicture.gif" border=0>
</td>
</tr>
</table>
</td></tr></table>
Any ideas?
/Stefan Lennerbrant
