Search code examples
htmlcssellipsis

Control overflow of TD element


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 ?


Solution

  • 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>