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 开发者_Python百科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 ?

---

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> 

---

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>

---

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.

---

Have you tried using -ms-text-overflow?

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

---

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>

---

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.

---

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