文本溢出:Internet explorer中的省略号问题

text-overflow: ellipsis problems in internet explorer

本文关键字：省略号 问题 explorer 溢出 Internet 文本      更新时间：2023-09-26

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

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

你知道我做错了什么吗?谢谢!

注:
我还尝试指定"宽度"属性，但无济于事。

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

对于遇到这个问题的任何人，我发现我必须定义一个高度以使IE高兴，height:20px;

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);
}
相关文章：