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

前端之家收集整理的这篇文章主要介绍了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 

enter image description here

这给了我想要的多行文本,但它打破了文本块的原始功能,如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中的更新代码

原文链接:https://www.f2er.com/js/429199.html

猜你在找的JavaScript相关文章