Control overflow of TD element

Spiderman picture Spiderman · Apr 13, 2011 · Viewed 26.4k times · Source

I have got TD with long text in it. I'd like it to be ellipsised, but I don't want to define the absolute width of this column - I want it to be calculated dynamically by its parent table. Is it possible? Here is a code for example:

<table width="100%" border="3">
<tr>
<td ><span style="white-space: nowrap; overflow: hidden; 
 text-overflow: ellipsis;" >
Here should be very long text: 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</span></td>
</table> 

Is there any way to force IE browser to display ellipsis even without defining the 'span' element with absolute width for example: width=300px ?

Answer

Spiderman picture Spiderman · Apr 13, 2011

The best answer I found: wrapping the long content of the TD in table with the definition:
'table-layout: fixed' This will magically solve this issue.

See for yourself -

<table width="100%" border="3">
<tr> <td>
<TABLE width=100% cellpadding=0 cellspacing=0 style='table-layout:fixed'><TR>
<TD style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;'>
Here should be very long text: 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</TD></TR></TABLE>
</td>
</table>