2

如果内容太宽提到如何在 HTML 内容中插入省略号，则在 HTML 标记中插入省略号 (...) 。此解决方案有效，但我发现当它应用于大型数据集（想象 1,000 个 div）时，它往往会变得非常慢。

我的 JSFiddle演示了这个问题。将我设置的变量 (numberOfDivs) 从 10 更改为 100 会显着增加输出结果所需的时间。将此数字从 100 更改为 1000，会导致 Chrome 想要终止该页面。

似乎 Jquery 的解决方案，以及我见过的其他解决方案，都涉及使用文本填充 DOM 中的元素（我相信我使用的 Jquery 插件做了类似的事情，对于大型数据集来说似乎很昂贵）或使用功能IE7 和其他较旧的浏览器不支持 (text-wrap:ellipsis)。

在处理大量数据时，似乎任何获取element.offsetWidth或获取昂贵的调用都是如此。element.clientWidth

有没有人发现任何优化或强大的服务器端解决方案？当我说强大的服务器端解决方案时，我的意思是考虑到文本的大小和包含 div（或其他元素）的大小。简单地做一个文本的子字符串是一种解决方案，但我不认为这很健壮。

4

2 回答 2

1

没有人会为此找到一个强大且高性能的解决方案，它涵盖所有浏览器并且在所有浏览器中都同样有效，因为它不存在。唯一强大且高性能的解决方案是纯 css，它仅受大多数人希望支持的浏览器子集的支持。

在您希望支持的所有浏览器 support 之前text-overflow: ellipsis，您可以拥有健壮（查看所有参数的慢 js）或高性能（无论是服务器还是客户端的子字符串）。

唯一不支持 css 技巧的浏览器是 firefox。IE7+ 和 chrome 和 safari 等 webkit 浏览器都支持它。Opera 通过以下方式支持它-o-text-overflow

如果您决定不支持 firefox，您可以通过以下方式支持所有其他浏览器：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;

你需要white-space: nowrap;并且overflow: hidden;把text-overflow工作做好。

如果您可以忍受无法选择的文本，那么您可以将XUL hack 用于 firefox，但我自己很少发现它有用。

于 2011-04-12T06:36:28.157 回答
1

我过去已经解决了类似的问题，并且以下优化对我们的目的表现得更好。它表现得更好，特别是对于比所需空间长得多的文本。但是 1000 div 的...不知道...

而不是提到的解决方案中的while循环，尝试这样的事情：

var diff = t.width() - el.width();
if (diff <= 0)
    return;
else {
    var avgWidth = t.width() / text.length;
    var redundantChars = diff / avgWidth;
    text = text.substr(0, text.length - redundantChars);
    t.html(text + "...");
}

while (text.length > 0 && t.width() > el.width()) {
    text = text.substr(0, text.length - 1);
    t.html(text + "...");
}

while (text.length < originalText.length && (t.width() + avgWidth) < el.width()) {
    text = originalText.substr(0, text.length + 1);
    t.html(text + "...");
}
于 2011-04-12T06:39:53.587 回答