Tuesday, February 21st, 2006

Quick Tip: Text Truncation with JavaScript

Category: JavaScript, Tip

A random tip here. This snippet allows you to truncate a paragraph, and add a ‘…’ to the end of the truncation. When a user clicks on the ‘…’ it expands out to the full text.

  • Truncate the text to a length of your choosing
  • Do not truncate in the middle of a word (only on a word boundary)
  • Keep the page search-engine friendly by publishing the complete non-truncated text
  • Add an ellipsis to the end of the truncated text
  • Make the ellipsis a link that expands the text to full length. Once expanded it cannot be collapsed again (but that functionality could be added just as easily)
  • Assumes that the content is plain text with no markup.
javascript

  1. var len = 100;
  2. var p = document.getElementById('truncateMe');
  3. if (p) {
  4.  
  5.   var trunc = p.innerHTML;
  6.   if (trunc.length > len) {
  7.  
  8.     /* Truncate the content of the P, then go back to the end of the
  9.        previous word to ensure that we don't truncate in the middle of
  10.        a word */
  11.     trunc = trunc.substring(0, len);
  12.     trunc = trunc.replace(/\w+$/, '');
  13.  
  14.     /* Add an ellipses to the end and make it a link that expands
  15.        the paragraph back to its original size */
  16.     trunc += '<a href="#" ' +
  17.       'onclick="this.parentNode.innerHTML=' +
  18.       'unescape(\''+escape(p.innerHTML)+'\');return false;">' +
  19.       '...< \/a>';
  20.     p.innerHTML = trunc;
  21.   }
  22. }

Posted by Dion Almaer at 8:01 am
12 Comments

+++--
3.4 rating from 56 votes

12 Comments »

Comments feed TrackBack URI

Nice trick, but usable???

I’ve never felt the urge to click some dots that are appended after a text…

Comment by SchizoDuckie — February 21, 2006

This code will fail miserably as soon as your paragraph-content has markup!

What’s wrong with text-overflow:ellipsis?

Comment by Lon — February 21, 2006

I believe IE is the only browser that will respect the ellipsis. In Mozilla you will just get a truncation.

Comment by Brian — February 21, 2006

Too bad they don’t provide a way to re-truncate after it is expanded.

Comment by Blizzo — February 21, 2006

The one problem with this code is that what you get from innerHTML is *not* the same thing as what you might set it to be. All you need to do is use innerHTML as a setter in IE with xml-valid markup, and then use it as a get to see what I’m referring to.

This can also be dangerous (for the reasons set above) because you may destroy closing tags in the process of truncation.

Nice thought though.

Comment by Tom Trenka — February 21, 2006

Not a bad idea, however I don’t see any use for this in the normal flow of a page’s text. I would use such a technique to truncate a blog excerpt for use within an AJAX search results call, but I agree this needs more work. Re-truncating the text would be helpful along with a regexp to weed out any html tags within the p element so as to not truncate in the wrong spot.

Comment by Sean Fousheé — February 21, 2006

Tom Trenka – “This can also be dangerous (for the reasons set above) because you may destroy closing tags in the process of truncation.”

He states in the beginning:
“Assumes that the content is plain text with no markup.”

I think this is only the beginning of a good tip.

Comment by Brian — February 21, 2006

I was excited about this for a whole 3 seconds. Then I saw that truncation was being driven by character length, not pixel size, which makes it pretty lame. The nice part about text-overflow:ellipsis is that the container object doing the truncation can be specified in pixels, so it’s suitable for truncating things like text in a table.

Comment by Josh Johnson — February 21, 2006

Thanks for the comments – I’m the original author. As mentioned, this was quickly created for a very specific case where the content is plain text without markup; however, I’m thinking of rewriting this to allow for markup (traversing the DOM and adding up character counts as you go along). Adding a link to re-truncate is easy and left as an exercise for the reader. Truncating based on pixel size sounds hard if not impossible/unreliable but I’d love to hear from anyone who has suggestions. Thanks for the tip on text-overflow:ellipsis, but it doesn’t really provide the same functionality.

Comment by Patrick Fitzgerald — February 22, 2006

Re-truncating the text would be helpful along with a regexp to weed out any html tags within the p element so as to not truncate in the wrong spot.

Comment by Slav — February 25, 2006

Actually rather than using a regexp to weed out html tags I thought it would be better to traverse the dom and count the text in each element until getting to the desired size, then remove any subsequent elements. It sounds like it would be possible, but there might still be a possibility for error. Unfortunately I haven’t had time to continue this.

Comment by Patrick Fitzgerald — February 27, 2006

Thank you very much, did not know a useful thing …

Comment by rtyug — January 18, 2010

Leave a comment

You must be logged in to post a comment.