截断使用truncate.js

问题描述：

多HTML文本我发现了一个精彩的HTML截断库，truncate.js，它处理的我的需求约99％。但我有一个我正面临的唠叨问题。我有一个要求'显示更多'的要求放置在一系列帖子的特定行数的末尾......这个图书馆可以实现一段文字......但是当涉及到多行文本显示更多的定位不当。截断使用truncate.js

我已经做了plunker来证明这个问题。我想要的只是能够在多行文本的相同位置放置多个文本，就像在同一页面上放置文本块一样。

我的第一次尝试是在truncateNestedNodeEnd添加上一个（）功能

if ($clipNode.length) { 
     if ($.inArray(element.tagName.toLowerCase(), BLOCK_TAGS) >= 0) { 
      // Certain elements like <li> should not be appended to. 
      $element.after($clipNode); 
     } 
     else 
      { 
      //edited this line to add prev() 
      //$element.append($clipNode) 
      $element.prev().append($clipNode); 

      } 
     }`

这给了我什么，我想要多行文字，但后来它打破了原有的功能如图所示的文本块。我如何使这个功能适用于这两种情况。当这两个帖子坐在同一页面上时，我仍然想要显示更多信息以显示在黄色部分。

你为什么要使用一个无用的JS来做什么你可以用CSS来实现？你还可以在没有任何图书馆的情况下做 –

@MarcoSalerno我不认为在这方面使用js是没用的。 CSS只会达不到我所需要的。。我们最初使用css，但它不符合以下要求：“截断文本应该在动态文本的最后一行之后立即显示在段落或多行文本中”。随着CSS，我们设法将“显示更多”绝对定位在正确的位置......这很好，但这不是我们想要的......“显示更多”应根据其长度附加在文本旁边。 –

答

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

if ($clipNode.length) { 
 
    if ($.inArray(element.tagName.toLowerCase(), BLOCK_TAGS) >= 0) { 
 
    // Certain elements like <li> should not be appended to. 
 
    $element.after($clipNode); 
 
    } else { 
 
    //edited this line to add prev() 
 
    //$element.append($clipNode) 
 
    $element.append($clipNode); 
 

 
    } 
 
} 
 

 
if ($rootNode.height() > options.maxHeight) { 
 
    if (child.nodeType === 3) { // text node 
 
    truncated = truncateTextContent($child, $rootNode, 
 
     $clipNode, options); 
 
    } else { 
 

 
    truncated = truncateNestedNode($child, $rootNode, $clipNode, 
 
     options); 
 
    } 
 
} 
 

 
if (!truncated && $clipNode.length) { 
 
    $clipNode.remove(); 
 
} else { 
 
    $element.prev().append($clipNode); 
 
}

而且问题似乎已经解决了

enter image description here

请同时参阅更新的代码在Plunker

好东西。它像一个魅力 –

答

我不知道我理解你的目标，但我认为你正试图获得的间距是用“@Abide Masaraure”文本中的重复span标签更加一致。

如果是这样的话，我建议研究使用Chrome的检查功能或其他浏览器类似的功能生成的HTML。

奇数间隔似乎因为不间断空格字符的发生（& NBSP）刚刚过去的跨度标记之前被插入。

下面是一些图像，我从你的plunker示例中展示出来。

不知何故，span标记正在生成，但没有任何内容，但非空白字符。

难道你截断逻辑莫名其妙允许空字符串或空格被转换成非断空格字符，这些span标记？这可能是您的显示问题的根本原因。我希望这有帮助。

答

您正在尝试获取截断以缩短已经很短的文本块。提及线不足以中断，因此在换行符中断，并且在到达换行符时没有任何内容要截断。如果您删除强制短行的div，则内容到达行末并按照您的预期换行。当您在前一个元素之前追加“showmore”时，如果只有一个元素，则它不起作用，如第二段的情况。 @JohnH提到的额外空格使格式变得难看，但不会导致中断。

截断使用truncate.js

相关推荐