javascript - 使用 truncate.js chop 多行 html 文本

Question

我发现了一个很棒的 html chop 库，truncate.js ，它可以处理我大约 99% 的需求。但我面临一个棘手的问题。我有一个要求，要求将“显示更多”放在一系列帖子的特定行数的末尾……这个库设法实现了一段文本……但是当涉及到多行文本显示时more 没有正确定位。

我做了一个plunker来证明这个问题。我想要的只是能够将 show more 放置在多行文本的相同位置，就像在同一页面上的文本 block 的显示方式一样。

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

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);

            }
       }`

这给了我想要的多行文本，但它随后破坏了文本 block 的原始功能，如 plunker 中所示。我怎样才能让这个功能适用于这两种情况。当这两个帖子位于同一页面时，我仍然希望显示更多以显示在黄色部分。

Answer 1

问题是 truncate.js 递归地将 $clipNode 放在不同的容器中，如果 chop 标志不为真则将其删除。您的方法的问题是您附加到元素的前一个节点，这在列出的项目的情况下是正确的，但在没有上一个项目的情况下不是真的(如文本 block 的情况)。这就是为什么在您的方法中它没有在文本 block 中插入任何内容。我已按如下方式更改代码并在函数末尾添加了另一个附加语句，以便在完成附加 $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 中的更新代码