I am using the jQuery dotdotdot truncation plugin dotdotdot.frebsite.nl

I want to truncate at max 2 lines. And when a user clicks on more, then it must show the full text (expand/de-truncate).

So far, I "only" manage to truncate my text. But not to "de-truncate" it.

Here is my code:

<p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae tellus eu dui placerat interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a class="read-more" href="#">more</a></p>

$(document).ready(function(){

    $('.truncate').dotdotdot({
        ellipsis     : '… ',
        watch        : true,
        wrap         : 'letter',
        height       : parseInt( $('.truncate').css('line-height'), 10) * 2, // this is the number of lines
        lastCharacter: {
            remove: [ ' ', ',', ';', '.', '!', '?' ],
            noEllipsis: []
        },
        after: "a.read-more"
    });


});

Live demo jsfiddle/NSnxe/1

I am using the jQuery dotdotdot truncation plugin dotdotdot.frebsite.nl

I want to truncate at max 2 lines. And when a user clicks on more, then it must show the full text (expand/de-truncate).

So far, I "only" manage to truncate my text. But not to "de-truncate" it.

Here is my code:

<p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae tellus eu dui placerat interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a class="read-more" href="#">more</a></p>

$(document).ready(function(){

    $('.truncate').dotdotdot({
        ellipsis     : '… ',
        watch        : true,
        wrap         : 'letter',
        height       : parseInt( $('.truncate').css('line-height'), 10) * 2, // this is the number of lines
        lastCharacter: {
            remove: [ ' ', ',', ';', '.', '!', '?' ],
            noEllipsis: []
        },
        after: "a.read-more"
    });


});

Live demo jsfiddle/NSnxe/1

• javascript
• jquery
• dotdotdot

• What is your question? – Barbara Laird Commented Sep 25, 2013 at 22:07
• When a user clicks "more," I want the full text to expand and 'de-truncate'. – cusejuice Commented Sep 25, 2013 at 22:09
• Note that the values you have for lastCharacter option are the same as the default ones. Hence this part of the code is irrelevant. – Adriano Commented Mar 17, 2015 at 14:40
• possible duplicate of Read More and Read Less with dotdotdot jQuery – Adriano Commented Mar 18, 2015 at 9:56
• I added a plete answer to the same question on stackoverflow./questions/25187774/… – Adriano Commented Mar 18, 2015 at 9:57

1 Answer 1

You can send a destroy message to dotdotdot

$('a.read-more').on( 'click', function(event) {
    event.preventDefault();
    $(this).parent().trigger("destroy");
});

http://jsfiddle/bhlaird/C5Ent/