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

Answer 1

我不确定我是否理解您的目标，但我认为您正试图通过“@Abide Masaraure”文本使重复的span标签更加一致。

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

奇怪的间距似乎是因为在最后一个span标记之前插入了不间断的空格字符（＆amp; nbsp;）。

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

生成span标签时，其中没有任何内容，但是不间断的空格字符。

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

Answer 2

您正试图通过截断来缩短已经很短的文本块。提及行的长度不足以打破，因此它在换行符上断开，并且在到达换行符时没有任何内容要截断。如果删除强制短行的div，则内容到达行的末尾并按预期包装。当你附加＆＃34; showmore＆＃34;在前一个元素之前，如果只有一个元素，则它根本不起作用，如第二个段落的情况。 @JohnH提到的额外空格使格式化变得丑陋但不会导致中断。

Answer 3

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

＆＃13;

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

＆＃13;

问题似乎已经解决了

enter image description here

另请参阅Plunker

中的更新代码

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

3 个答案: