javascript – 使用truncate.js截断多行html文本

我找到了一个很棒的html截断库,truncate.js,它可以处理我99％的需求.但是我面临着一个棘手的问题.我有一个要求,要求在一系列帖子的特定行数的末尾放置“显示更多”…这个库可以实现一个文本块…但是当涉及多行文本显示时更多的位置不正确.

我已经制作了一个plunker来证明这个问题.我想要的是能够在多行文本的相同位置放置更多节目,就像它坐在同一页面上的文本块一样.

我的第一个尝试是在truncateNestedNodeEnd函数中添加prev()

if ($clipNode.length) {
        if ($.inArray(element.tagName.toLowerCase(),BLOCK_TAGS) >= 0) {
            // Certain elements like 

这给了我想要的多行文本,但它打破了文本块的原始功能,如plunker中所示.如何使这个功能适用于这两种情况.当这两个帖子坐在同一页面上时,我仍然希望显示更多显示在黄色部分.

最佳答案

问题是truncate.js以递归方式将$clipNode放在不同的容器中,如果截断标志不为true,则删除它们.您的方法的问题在于您附加到元素的前一个节点,在列出的项目的情况下是真的,但如果没有前一个项目则不是真的(如文本块的情况).这就是为什么在你的方法中它没有在文本块中插入任何东西.我已经按如下方式更改了代码,并在函数末尾添加了另一个append语句,这样一旦它完成附加$clipNode,它就会将$clipNode容器移动到前一个元素(如果有的话).

if ($clipNode.length) {
  if ($.inArray(element.tagName.toLowerCase(),BLOCK_TAGS) >= 0) {
    // Certain elements like 

问题似乎已经解决了

enter image description here

另请参阅Plunker中的更新代码

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。