如何使用dotdotdot扩展onclick的截断文本?

问题描述

我正在使用jQuery dotdotdot截断插件 dotdotdot.frebsite.nl

我想截断最多2行.并且，当用户单击more时，它必须显示全文(展开/取消截断).

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.

这是我的代码:

<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"
    });


});

实时演示 jsfiddle.net/NSnxe/1

推荐答案

您可以将破坏消息发送到dotdotdot

You can send a destroy message to dotdotdot

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

http://jsfiddle.net/bhlaird/C5Ent/

这篇关于如何使用dotdotdot扩展onclick的截断文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！