Text overflow: ellipsis issues in Internet Explorer

Question

I am trying to shorten the length of columns in a specific table.

I use jQuery to add dots of text overflow and a few more css properties.
I also add a tooltip using some more jQuery. Here is my code:

$('#table_id tr td:not(:last)').css({ "text-overflow": "ellipsis", "max-width": "110px", "overflow": "hidden", "display" : "block" }).each(function (index, element) { $(element).attr("title", $(element).text()); }); 

Everything works fine in Firefox and Chrome, but (surprise! Surprise!) IE7-9 displays the text in its entirety.

Any idea what I'm doing wrong? Thanks!

PS
I also tried to specify the property "width" without possibility.

Answer 1

You need white-space:nowrap; on td . In addition, table-layout:fixed; must be installed in the table itself, or IE will still not cut the text.

Answer 2

For everyone who is faced with this problem, I found that I need to determine the height in order to make IE happy, height:20px;

Answer 3

IE7 will not use text overflow in table elements - you will have to wrap the content with the unnecessary containing element and apply text-overflow (and related styles) to it:

 $('#table_id tr td:not(:last)').each(function (index, element) { var $el = $(element); var text = $el.text(); var html = $el.html(); $el.attr("title", text).empty(); $('<div>').css({ "text-overflow": "ellipsis", "max-width" : "110px", "overflow" : "hidden", "display" : "block" }).html(html).appendTo($el); }