jquery.dotdotdot部分未显示

Question

我正在使用jquery.dotdotdot为文本部分创建read more/read less链接。对于有多个p标记的部分，文本不会显示。不太确定是什么问题。我已经将我的代码包含在下面的小提琴中。

感谢大家的帮助！谢谢!

View Full Code Here

$(function () {
    var addLink = $('.securetext');
        addLink.append('<span class="readmore trigger-js">&nbsp;<a >Read more</a></span>');
        for (i = 0; i < addLink.length; i++) {
            if ($(addLink[i]).children("p").length > 0) {
                $(addLink[i]).children("p").last().append('<span class="readless trigger-js">&nbsp;<a >Read less</a></span>');
            } else {
                $(addLink[i]).append('<span class="readless trigger-js">&nbsp;<a >Read less</a></span>');
            }
        }
        truncateIfNeeded(); // Initialize ellipsis
    });

var truncateIfNeeded = function (jqueryTag) {
    var $selectionToTruncate = jqueryTag || $('.securetext');

    $selectionToTruncate.dotdotdot({
        ellipsis: '... ',
        watch: true,
        //wrap    : 'letter',
        height: 20 * 3, // max number of lines
        after: '.readmore',
        callback: function (isTruncated, orgContent) {
            var $currentReadMore = $(this).find('.readmore');
            var $currentReadLess = $(this).find('.readless');

            if (isTruncated) {
                $(this).addClass('securetext--is-truncated');
                $(this).removeClass('securetext--is-not-truncated');
            }
            bindReadMore(); // bind click on "read more"
        }
    });
};

Answer 1

问题出在用于截断的算法上。

在第一次迭代中，Read More...链接被添加到段落之后(恰好是3行长)。这意味着将调用截断逻辑。

在第二次迭代中，Read More...被添加到段落内部。然后整个代码放在3行代码中，所以去掉了。这显然是一个bug。

描述GitHub was closed as 上的错误的问题。

This pull request提供了部分修复，但如果元素在段落之间被截断，则不会显示省略号。(不过，read-more链接将会出现。)