Monday, August 13th, 2007
Ellipsis or “truncate with dots†via JavaScript
Category: JavaScript, Library
text-overflow:ellipsis, so he created it and told us all about it via Ellipsis or “truncate with dots†via JavaScript.
You can see it in action, or download the code. The main ellipsis function:
JAVASCRIPT:
-
-
function ellipsis(e) {
-
var w = e.getWidth() - 10000;
-
var t = e.innerHTML;
-
e.innerHTML = "<span>" + t + "</span>";
-
e = e.down();
-
while (t.length> 0 && e.getWidth()>= w) {
-
t = t.substr(0, t.length - 1);
-
e.innerHTML = t + "...";
-
}
-
}
-
Related Content:
2.4 rating from 86 votes
I would think the why part of this is important – the only legit use I’ve seen of text-overflow:ellipsis; is in data tables – for preserving the table’s dimensions in case of to much content.
Of course, you have to provide some way to get to that content…
[this space intentionally left content-less]
Similar stuff from last year:
http://ajaxian.com/archives/quick-tip-text-truncation-with-javascript
He appears to be using Prototype so he could also use the t.truncate(t.length-1);
also a css cross browser solution: Compatible with IE5.5+, Opera9+, FF1.0+, Safari 2.0+
HedgerWow’s blog:
http://blog.360.yahoo.com/blog-ktYYK_s5fqJ2Hu1ryv2QSL0-?cq=1&p=277
So why not use the … html entity?
I’m haven’t tried it out, but the while loop looks a bit scary.
It looks like it could get quite intensive to remove one character at a time. I would guess that the browser needs to re-render every time (otherwise how could it know the new width). In a big table I can imagine that it would a) flicker and b) take a long time.
Has anyone tried? I’m obviously no Ajax programmer so I don’t know how fast these kinds of operations are.
Theo: you’re right. A binary search would be much more efficient. That’s the approach I took to let text flow from column to column on 13thparallel:
http://www.speedingrhino.com/13thparallel.htm
For such a small effect like an ellipsis it seems like an awfully large performance hit, especially if used often
Ditto @Joris
He should be using
…instead of …I do this server-side when munging data to go into tables. I use &h ellip; (no space), and I wrap it in an acronym tag, with the title as the full (non-truncated) text so that users can access it by hovering on the elipsis.
eg: This is my truncated …
Besides the performance implications, there is also the visual problem that if multiple columns get elipsis, which is likely, the elipsis will be jagged.
Another approach is to test for overflow similar to how this guy did it, then stick in an elipsis span over top of the overflowed text, using a higher z-index, and possibly absolute positioning (various ways to get that done depending on existing layout)…
[pretentious_grammar_nazi] The act is to elide and the mark on the paper is an ellipsis (plural ellipses). [/pretentious_grammar_nazi]
Not really useful from an accessibility stand-point. I’d rather prefer setting the CSS to overflow: hidden and overlay a layer on demand.
This is more benefitial if you want to keep the actual text in full.
Alternatively you can set overflow to hidden and place a floating div containing ‘…’
I’m a bit skeptic about efficiency of algorithm used. Reducing text char-by-char from tail will cause serious performance problem in case of narrow area and quite long text (say, 4K+).
It should be better to test first half of text (“half” by length). If it doesn’t fit, then it’s necessary to divide it further recursively. If it fits, then it’s necessary to check recursively how much text from second half fits as well and add this value to first part. Even text with 64K symbols should be processed approx. in 16 iterations.
VS