jquery.dotdotdot 部分未显示答案

【问题标题】：jquery.dotdotdot sections not showing upjquery.dotdotdot 部分未显示
【发布时间】：2015-04-08 06:28:20
【问题描述】：

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

感谢您的帮助！谢谢！

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

【问题讨论】：

您的代码运行正常，有什么问题？
如果您查看小提琴，您会注意到测试 2 下的第二部分根本没有显示。
嗯，我只是查看了跨浏览器，它看起来可以在 Safari 中运行，但不能在 Chrome、Firefox 或 IE8 中运行。
到目前为止，我发现它与 after 选择器不是截断段落中存在的元素有关。如果您删除 after 选项，您将正确获得第一段。仍在调查为什么会这样。

标签： jquery dotdotdot

【解决方案1】：

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

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

在第二次迭代中，Read More... 被添加到段落中。然后整个内容适合 3 行，因此它被删除。这显然是一个错误。

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

This pull request 提供了部分修复，但在元素在段落之间被截断的情况下不会显示省略号。（不过，阅读更多链接会显示出来。）

【讨论】：