文本溢出：Internet Explorer 中的省略号问题答案

【问题标题】：text-overflow: ellipsis problems in internet explorer文本溢出：Internet Explorer 中的省略号问题
【发布时间】：2012-01-18 12:07:13
【问题描述】：

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

我正在使用一些 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 以完整长度呈现文本。

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

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

【问题讨论】：

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

标签： javascript css internet-explorer ellipsis

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

为我工作！非常感谢！

【解决方案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);
}

【讨论】：