javascript - 文本溢出：Internet Explorer 中的省略号问题

Question

我正在尝试缩短某个表中列的长度。

我正在使用一些 jQuery 来添加文本溢出省略号和更多的 CSS 属性。
我还使用更多的 jQuery 添加了一个工具提示。这是我的代码：

$('#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()); });

在 Firefox 和 Chrome 中一切正常，但是（惊喜！惊喜！）IE7-9 以完整长度呈现文本。

知道我在做什么错吗？谢谢！

PS
我也尝试过指定“宽度”属性但无济于事。

Answer 1

你也需要white-space:nowrap;。td另外，table-layout:fixed;必须在表格本身上设置，否则IE仍然不会截断文字。

Answer 2

对于遇到这个问题的其他人，我发现我必须定义一个高度才能让 IE 开心，height:20px;

Answer 3

IE7 不会在表格元素上应用文本溢出——你必须将内容包装在一个多余的包含元素中，并将你的text-overflow（和相关的样式）应用到它：

$('#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);
}