CODEWITHSUNDEEP
htmlcssellipsis
Spiderman
Spiderman

Reputation: 10030

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 ?

Upvotes: 15

Views: 29100

Answers (7)

Inyavic
Inyavic

Reputation: 1

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

Upvotes: -4

Oliver
Oliver

Reputation: 39

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>

Upvotes: 2

Spiderman
Spiderman

Reputation: 10030

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>

Upvotes: 37

two7s_clash
two7s_clash

Reputation: 5827

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.

Upvotes: 0

Vismari
Vismari

Reputation: 745

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.

Upvotes: 1

wdm
wdm

Reputation: 7189

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>

Upvotes: 0

two7s_clash
two7s_clash

Reputation: 5827

Have you tried using -ms-text-overflow?

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

Upvotes: 0

Related Questions