Comments on: Quick Tip: Text Truncation with JavaScript

By: rtyug

rtyug — Tue, 19 Jan 2010 03:57:38 +0000

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

By: Patrick Fitzgerald

Patrick Fitzgerald — Mon, 27 Feb 2006 17:03:09 +0000

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.

By: Slav

Slav — Sat, 25 Feb 2006 07:30:24 +0000

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.

By: Patrick Fitzgerald

Patrick Fitzgerald — Wed, 22 Feb 2006 15:53:26 +0000

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.

By: Josh Johnson

Josh Johnson — Wed, 22 Feb 2006 04:01:44 +0000

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.

By: Brian

Brian — Tue, 21 Feb 2006 20:29:27 +0000

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.

By: Sean FousheÃ©

Sean FousheÃ© — Tue, 21 Feb 2006 19:36:29 +0000

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.

By: Tom Trenka

Tom Trenka — Tue, 21 Feb 2006 17:46:11 +0000

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.

By: Blizzo

Blizzo — Tue, 21 Feb 2006 16:28:33 +0000

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

By: Brian

Brian — Tue, 21 Feb 2006 14:54:09 +0000

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

By: Lon

Lon — Tue, 21 Feb 2006 14:37:54 +0000

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

What’s wrong with text-overflow:ellipsis?

By: SchizoDuckie

SchizoDuckie — Tue, 21 Feb 2006 14:11:10 +0000

Nice trick, but usable???

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