How to insert ellipsis into a large dataset in HTML with the least latency

Question

Insert ellipsis (...) into HTML tag if content too wide mentions how to insert ellipsis into HTML content. This solution works, but I find that when it is applied to a large dataset (imagine 1,000 div's) it tends to get pretty slow.

My JSFiddle demonstrates this issue. Changing the variable I set (numberOfDivs) from 10 to 100 dramatically increases the time it takes to output the results. Changing this number from 100 to 1000, causes Chrome to want to kill the page.

It seems like Jquery's solution, and the others I have seen, all involve either populating an element in the DOM with the text (I believe the Jquery plugin I used does something of the sort, it seems expensive for large datasets) or using a feature not supported by IE7 and other older browsers (text-wrap:ellipsis).

It also seems like any calls to get element.offsetWidth or element.clientWidth get expensive when dealing with large sets of data.

Has anyone found any optimizations or robust server-side solutions? When I say robust server-side solution, I mean one that takes into account the text's size and size of the containing div (or other element). Simply doing a substring of the text is one solution, but I would not consider that robust.

i would imagine server-side is next to impossible to make 'robust' because the server has no idea about the client's screen-size, font-size, accessibility settings, etc etc. there are simply too many variables to take into account. i would tentatively say that for a server-side solution, substring is pretty much your best choice. for client-side, you can get clever, but as you spotted, it takes time for a lot of data... — chris, Apr 12 '11 at 06:19

Martin Jespersen · Accepted Answer · 2011-04-12T06:48:21.653

Nobody will have found a robust & performant solution for this, that covers all browsers and works equally well in all of them since it doesn't exist. The only robust & performant solution would be pure css, which is only supported by a subset of the browsers most people wish to support.

Until all browsers you wish to support, support text-overflow: ellipsis, you can have either robust (slow js that looks at all parameters) or performant (substring whether server or clientside).

The only browser that doesn't support the css trick is firefox. IE7+,and webkit browsers like chrome and safari supports it just fine. Opera supports it by -o-text-overflow

Should you decide to not support firefox, you can support all the other browsers by doing this:

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

You need white-space: nowrap; and overflow: hidden; to make the text-overflow work well.

If you can live with text not being selectable then you can use the XUL hack for firefox, but i rarely find it usefull myself.

your answer did lead me to a better solution. Use browser detection to see if the browser supports text-overflow:ellipsis, if not fall back on the Jquery approach. Since most of the site this is for is on IE8, this fix will be great. — stevebot, Apr 12 '11 at 17:36

score 1 · Answer 2 · edited May 23 '17 at 09:58

I've solved similar issue in the past and following optimization performed better for our purpose. It performs better especially for texts much longer than required space. But 1000 div's... don't know...

Instead of the while loop in the mentioned solution, try something like this:

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 + "...");
}

How to insert ellipsis into a large dataset in HTML with the least latency

2 Answers2