我正在使用 jquery.dotdotdot 为文本部分创建“阅读更多/阅读更少”链接。对于有多个 p 标签的部分，不会显示文本。不太确定问题是什么。我已将我的代码包含在下面的 fiddle 中。
非常感谢任何帮助! 谢谢!
$(function () {
var addLink = $('.securetext');
addLink.append('<span class="readmore trigger-js"> <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"> <a >Read less</a></span>');
} else {
$(addLink[i]).append('<span class="readless trigger-js"> <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"
}
});
};
最佳答案
问题在于用于截断的算法。
在第一次迭代中，阅读更多... 链接添加在该段落之后(恰好有 3 行长)。这意味着调用了截断逻辑。
在第二次迭代中，阅读更多... 添加到段落内。然后整个内容会变成 3 行，因此它被删除。这显然是一个错误。
GitHub 上描述错误的问题 was closed as wontfix .
This pull request提供了部分修复，但如果元素在段落之间被截断，则不会显示省略号。 (不过，阅读更多链接将会显示。)
关于jquery.dotdotdot 部分未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29507445/