Truncate text with the jTruncate jQuery Plugin

I stumbled across this pretty useful jQuery Plugin the other day that i though some of you would appreciate. It was written by Jeremy Martin a few years back. The plugin solves a big problem in that, if you have too much text you can not truncate it, or split it into two section allowing you to hide and reveal the text when needed. The plugin works well if you have have for example a set of user generated comments where you want to keep the height of a specific div a consistent height, but allow for a read more button.

The Code

implementation of any jQuery plugin is relatively pain free due to the framework architecture. For those who are yet to use plugins, you need to include the jQuery framework – I generally use the google jQuery hosted file which can be found here, you will also see other frameworks hosted here for those who don’t know. You will notice there are several parameters that can be adjusted below, ‘length’ being the main option that allows you to adjust how much text is initially shown. You’ll find the complete documentation for the plugin here.

$().ready(function() {
    $('.text').jTruncate({
        length: 200,
        minTrail: 0,
        moreText: "Read More",
        lessText: "Read Less",
        ellipsisText: " (Click below to continue reading)"
    });
});

This is certainly a great little plugin that gets around the need to use server side scripts shorten text.

This entry was posted in Javascript, Tutorials, Web Tools, headline, jQuery and tagged Ajax, Javascript, jQuery, Tutorials. Bookmark the permalink.