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。
我也试过指定“宽度”属性但没有用。

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);
}

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

3 个答案: