如何以最少的延迟将省略号插入到 HTML 中的大型数据集中

Question

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

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

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

在处理大量数据时，对 get element.offsetWidth 或 element.clientWidth 的任何调用似乎都会变得昂贵。

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

Answer 1

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

在您希望支持的所有浏览器都支持 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: hide; 以使 text-overflow 正常工作。

如果您可以忍受文本不可选择的情况，那么您可以使用 XUL hack for firefox，但我自己很少发现它有用。

Answer 2

我过去已经解决过类似的问题，并且以下优化对于我们的目的来说效果更好。它的性能更好，特别是对于比所需空间长得多的文本。但是 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 + "...");
}