Control overflow of TD element

Question

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 ?

Duplessis

Are you willing to use some JavaScript? – Coffelt

BTW - in the example above even when changing the width of the table to be absolute (for example width=900px) it won't change anything and the size of the table will exceed the screen size due to the length of the cell's text – Duplessis

regarding javascript - if you have a suggestion, go ahead but basically I'd rather a solution that is based on CSS and HTML layout definitions – Duplessis

Answer 1

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> 

Duplessis

Answer 2

I found another way works without table-layout: fixed.

Put your context into an td using input Value or Placeholder attribute.

Then Style the input Like a normal context can't be edit.

This will works with a true flexible table td width.

<table>
  <tr>
    <td>
      <input type="text" value="TitleTitleTitleTitle" />
    </td>
    <td>
      <input type="text" placeholder="ValueValueValueValue" />
    </td>
    <td>
      <input type="text" value="NumberNumberNumberNumber" />
    </td>
  </tr>
</table>
<style>
table{
  width: 100%;
}
td{
  input{
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-user-select: none;
    cursor: default;
  }
}
</style>

Schilt

Answer 3

No! IE does not allow changing the way the table is displayed, so if you don't use an element like a span the text won't clipped. If you need put ellipsis to clip the text you must use an element like a span or div with absolute width.

To turn it automatically you can use JavaScript or switch from table to div's. I hope this helps you.

Aerobiosis

That's ridiculous - since if I remove the attribute 'white-space: nowrap' IE know to consider the table's width and to wrap the text accordingly. so why can't it do the same in case the text should be clipped? But you may be right - IE behave strangely sometimes – Duplessis

Answer 4

Have you tried using -ms-text-overflow?

http://msdn.microsoft.com/en-us/library/ms531174(v=vs.85).aspx

Coffelt

Isn't it part of .NET framework only? in any case I don't see how it helps to solve this use case. – Duplessis

Nope. The -ms-text-overflow attribute is an extension to CSS, and can be be used in IE8 mode. – Coffelt

Answer 5

Solution using jQuery...

Note: "text-overflow: ellipsis" doesn't seem to be working in FF4.

Demo: http://jsfiddle.net/vgfDd/1/

$w = $('.setWidth').attr('width');
$('.setWidth').find('span').width($w);

CSS...

table {
    border: 3px solid black;
}

span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

HTML...

<table width="100px" class="setWidth">
    <tr>
        <td>
            <span>
                Here should be very long text: 
                bla bla bla bla bla bla bla
            </span>
        </td>
        <td>
            <span>
                Here should be very long text: 
                bla bla bla bla bla bla bla
            </span>
        </td>
    </tr>
</table>

Antibes

Answer 6

A pure CSS and JavaScript (no jQuery needed) solution is outlined here: http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript

But you'll need to wrap the content per Vismari's comment above.

Coffelt

Answer 7

You should use <table width="inherit"> for it to inherit its width from the parent element.

Thornberry

Aha! Thank you ilmari; in the future, @Inyavic, please surround any HTML tags with backticks (`) so that they appear in the text. Without that, all context was missing. – Bucher