使用 truncate.js 截断多行 html 文本答案

【问题标题】：Truncating multiline html text using truncate.js使用 truncate.js 截断多行 html 文本
【发布时间】：2018-02-07 05:53:06
【问题描述】：

我找到了一个很棒的 html 截断库 truncate.js，它可以满足我大约 99% 的需求。但我有一个困扰我的问题。我有一个要求，要求将“显示更多”放在一系列帖子的特定行数的末尾……这个库设法为一块文本实现……但是当涉及到多行文本显示时more 没有正确定位。

我已经发了plunker 来演示这个问题。我想要的只是能够将 show more 放置在多行文本的相同位置，就像它显示在同一页面上的文本块一样。

我的第一次尝试是在 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 所示。如何使此功能适用于这两种情况。当这两个帖子位于同一页面时，我仍然想在黄色部分显示更多内容。

【问题讨论】：

为什么要用一个没用的js来做css能做到的事情？你仍然可以在没有任何库的情况下做到这一点
@MarcoSalerno 我不认为在这方面使用js是无用的。仅 CSS 无法实现我所需要的。 .我们最初使用 css，但它不满足以下要求“截断文本应立即显示在段落或多行文本中的动态文本的最后一行之后”。使用 css，我们设法将“显示更多”绝对定位在右侧……效果很好，但这不是我们想要的……“显示更多”应根据其长度附加在文本旁边。

标签： javascript truncate truncation

【解决方案1】：

问题是 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);
}

问题似乎已经解决了

enter image description here

另请参阅Plunker中的更新代码

【讨论】：

【解决方案2】：

我不确定我是否理解您的目标，但我认为您正在尝试使带有“@Abide Masaraure”文本的重复跨度标签的间距更加一致。

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

奇怪的间距似乎是因为不间断的空格字符 (&nbsp ;) 被插入到最后一个 span 标签之前。

以下是我从您的 plunker 示例中提取的一些图片来展示这一点。

不知何故，生成的跨度标签除了不间断的空格字符之外什么都没有。

您的截断逻辑能否以某种方式允许将空字符串或空格转换为这些带有不间断空格字符的跨度标记？这可能是您的显示问题的根本原因。我希望这会有所帮助。

【讨论】：

【解决方案3】：

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

【讨论】：