AJAX & JavaScript

Truncate html content using JQuery

If you have small content area and need to show there a lot of text you may want to use dynamic content collapsing. This means user will see truncated part of content which can be expanded to full version with some button.

In that case you are able to use existing Truncate JQuery plugin.

Example usage:

$(".example").truncate( 120,{
        chars: /\s/,
        trail: [ " ( <a href='#' class='truncate_show'>more</a> . . . )",
                 "( . . . <a href='#' class='truncate_hide'>less</a> )" ]
    });

Collapsed content example:

Expanded content example:

Leave a Reply