Use your left/right keys to browse tutorials
Truncate text with the jTruncate jQuery Plugin

Truncate text with the jTruncate jQuery Plugin

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on January 4, 2010

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.

demodownload



More tutorials from Papermashup
Comments
4 discussions around Truncate text with the jTruncate jQuery Plugin
  1. Ian says:

    I’m new to this so please bear with me! I have jtruncate working, however I want jtruncate to truncate text located on another page in the same web site, say newspage for example. In in line 02 of the code below what do i need to change ‘.text’ to for this to work?.
    Cheers – Any tips gratefully received.

    $().ready(function() {
    02 $(‘.text’).jTruncate({
    03 length: 200,
    04 minTrail: 0,
    05 moreText: "Read More",
    06 lessText: "Read Less",
    07 ellipsisText: " (Click below to continue reading)"
    08 });
    09 });

  2. Christopher says:

    How can I add a class to the links? I want to add the class “button” to them to use a customized style.

  3. brijkishor says:

    Good article.
    I have one question.
    I have a one page which contain two section 1 and 2
    section1 contain 3 more and less link and section2 also contain 5 more and less link then how to we customize it.

    I want all less and more link controll by only one function.
    is it possible by “jtruncate-jquery-plugin”?.

    Thanks

    • Ashley says:

      @brijkishor if your text is going to be all the same length, this shouldn’t be a problem, however if you want the text different lengths you’ll have to create several instances of the code in your page, which possibly might not be the best solution.





Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.