使用truncate.js截断多行HTML文本

Question

我发现了一个很棒的html截断库，truncate.js，它可以满足我99%的需求。但是我有一个令人困扰的问题。我有一个要求，需要在一系列帖子的特定行数末尾放置“显示更多”...虽然该库可以管理文本块，但当涉及多行文本时，“显示更多”未能正确定位。

我制作了一个plunker来演示这个问题。我想做的就是能够像同一页上的文本块一样，在多行文本的相同位置放置“显示更多”。

我的第一次尝试是在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);

            }
       }`

这个方法可以实现多行文本的功能，但是它会破坏原来适用于一整块文本的功能，如在plunker中所示。我该如何让这个函数同时适用于这两种情况？当这两篇文章出现在同一页时，我仍希望“显示更多”出现在黄色部分。

- abidmix

---

为什么要使用无用的js来完成可以通过css实现的功能呢？而且你也可以不使用任何库来实现。 - Marco Salerno

@MarcoSalerno 我认为在这方面使用js并不是无用的。仅使用css无法实现我所需的功能。我们最初使用了css，但它没有满足以下要求：“截断文本应立即显示在动态文本的最后一行之后，无论是在段落还是多行文本中”。使用css，我们成功地将“显示更多”绝对定位到右侧...这很好，但这不是我们想要的...“显示更多”应根据其长度附加在文本旁边。 - abidmix

Answer 1

我不确定我理解你的目标，但我认为你想让重复的 span 标签与“@Abide Masaraure”文本之间的间距更加一致。

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

奇怪的间距似乎是由于在最后一个 span 标签之前插入了非断空格字符（&nbsp ;)。

这里有一些我从您的 plunker 示例中提取的图像来展示这个问题。

不知何故，span 标签只包含非断空格字符。

您的截断逻辑是否允许将空字符串或空格转换为带有不间断空格字符的这些span标签？这可能是您显示问题的根本原因。希望能对您有所帮助。

- JohnH

Answer 2

你正在尝试使用truncate缩短已经很短的文本块。提到的行不够长，所以会在换行符处断开，并且在达到换行符时没有任何内容可以截断。如果删除强制生成短行的div，则内容将达到行末并像您期望的那样换行。 当您在先前元素之前附加“showmore”时，如果只有一个元素，则根本不起作用，例如第二段落的情况。 @JohnH提到的额外空格使格式难看，但并不会导致断开。

- biznetix

Answer 3

问题在于truncate.js会递归地将$clipNode放入不同的容器中，并在截断标志未设置时将其移除。您的方法存在问题，因为它将元素附加到先前的节点，这在列出项目的情况下是正确的，但对于没有先前项目的情况（例如文本块），则不正确。这就是为什么在您的方法中它无法插入任何内容到文本块中的原因。我已经根据以下代码进行了更改，并在函数末尾添加了另一个附加语句，以便一旦完成附加$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);
}

问题似乎已经得到解决

在此输入图片描述

请参考Plunker中更新的代码

- BILAL AHMAD