Monday, August 13th, 2007

Ellipsis or “truncate with dots” via JavaScript

Category: JavaScript, Library

Steffen Rusitschka wanted a cross-browser 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

  1. function ellipsis(e) {
  2.   var w = e.getWidth() - 10000;
  3.   var t = e.innerHTML;
  4.   e.innerHTML = "<span>" + t + "</span>";
  5.   e = e.down();
  6.   while (t.length > 0 && e.getWidth() >= w) {
  7.     t = t.substr(0, t.length - 1);
  8.     e.innerHTML = t + "...";
  9.   }
  10. }

Posted by Dion Almaer at 8:16 am
13 Comments

++---
2.5 rating from 91 votes

13 Comments »

Comments feed TrackBack URI

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]

Comment by Sudrien — August 13, 2007

Similar stuff from last year:
http://ajaxian.com/archives/quick-tip-text-truncation-with-javascript

Comment by Patrick Fitzgerald — August 13, 2007

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

Comment by Jdalton — August 13, 2007

So why not use the … html entity?

Comment by Joris — August 13, 2007

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.

Comment by Theo — August 13, 2007

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

Comment by Michael van Ouwerkerk — August 13, 2007

Ditto @Joris

He should be using instead of …

Comment by Eric Fields — August 13, 2007

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

Comment by Ben — August 13, 2007

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)…

Comment by Joe Larson — August 13, 2007

[pretentious_grammar_nazi] The act is to elide and the mark on the paper is an ellipsis (plural ellipses). [/pretentious_grammar_nazi]

Comment by Karl G — August 13, 2007

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.

Comment by Andy — August 13, 2007

Alternatively you can set overflow to hidden and place a floating div containing ‘…’

Comment by Rizqi Ahmad — August 13, 2007

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

Comment by Valery Silaev — August 15, 2007

Leave a comment

You must be logged in to post a comment.