The Pug Automatic

jQuery "more"/"less" HTML truncate

Written February 28, 2008. Tagged JavaScript, jQuery.

I previously made a truncate helper for Rails that handles HTML gracefully: doesn't split inside HTML entities, doesn't orphan end-tags and so on.

Truncating like this on the server-side is great in contexts where you don't want to show the full text as well, such as in an index of items.

Another common case for truncation is "more"/"less" links: you want to show the full text, such as a user's presentation, but for layout reasons a truncated snippet should be shown first, with a "more" link to disclose the rest. A "less" link gives you the snippet again.

In this case, doing it server-side isn't a great idea. Doing it unobtrusively with JavaScript is a better fit: the "hard" HTML source only needs to contain the full text.

I found myself wanting such a piece of JavaScript, but I couldn't find one that handled markup well. There is Truncate, but it's broken at the time of writing (as evidenced by its own example 3).

So I rolled my own truncator, inspired by my Rails helper. It's a jQuery plugin.

I'm a bit short on time, so I'll just hook you up with the jQuery HTML Truncator example page. That page includes the plugin itself.

Enjoy, and please report bugs/improvements. Some parts could definitely do with prettying up.