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:
-
-
var len = 100;
-
var p = document.getElementById('truncateMe');
-
if (p) {
-
-
var trunc = p.innerHTML;
-
if (trunc.length> len) {
-
-
/* Truncate the content of the P, then go back to the end of the
-
previous word to ensure that we don't truncate in the middle of
-
a word */
-
trunc = trunc.substring(0, len);
-
trunc = trunc.replace(/\w+$/, '');
-
-
/* Add an ellipses to the end and make it a link that expands
-
the paragraph back to its original size */
-
trunc += '<a href="#" ' +
-
'onclick="this.parentNode.innerHTML=' +
-
'unescape(\''+escape(p.innerHTML)+'\');return false;">' +
-
'...<\/a>';
-
p.innerHTML = trunc;
-
}
-
}
-
3.5 rating from 49 votes
Nice trick, but usable???
I’ve never felt the urge to click some dots that are appended after a text…
This code will fail miserably as soon as your paragraph-content has markup!
What’s wrong with text-overflow:ellipsis?
I believe IE is the only browser that will respect the ellipsis. In Mozilla you will just get a truncation.
Too bad they don’t provide a way to re-truncate after it is expanded.
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.
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.
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.
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.
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.
BTW, the project from which I plucked this code went live today - it does some interesting JavaScripty things while keeping the page search-engine friendly: WebMD Health Video Library
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.
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.