在Internet Explorer中出现的text-overflow: ellipsis问题

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渲染文本的全长。

您有什么想法是我做错了什么吗？ 谢谢！

P.S.
我也尝试过指定“width”属性，但无济于事。

- Svarog

---

尝试添加 white-space: nowrap 和 width:100%。 - rcode

Answer 1

您需要在 td 标签上添加 white-space:nowrap; 属性。此外，表格本身必须设置 table-layout:fixed; 属性，否则IE仍将无法截断文本。

- Nate B

Answer 2

如果有其他人遇到这个问题，我发现必须定义高度才能让IE满意，height:20px;

- adamdport

Answer 3

IE7不会在表格元素上应用text-overflow属性 - 您必须将内容包装在一个否则多余的容器元素中，并将您的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);
}

- Barney