Javascript 使用truncate.js截断多行html文本
我发现了一个很棒的html截断库，它处理了我99%的需求。但我有一个困扰我的问题。我有一个要求，要求将“显示更多”放在一系列文章的特定行数的末尾…这是该库为一个文本块设法实现的…但当涉及到多行文本显示更多时，没有正确定位 我已就这一问题作了说明。我所希望的就是能够将多行文本的“显示更多”放在相同的位置，就像放在同一页上的文本块一样 我的第一次尝试是在truncateNestedNodeEnd函数中添加prev（）Javascript 使用truncate.js截断多行html文本,javascript,truncate,truncation,Javascript,Truncate,Truncation,我发现了一个很棒的html截断库，它处理了我99%的需求。但我有一个困扰我的问题。我有一个要求，要求将“显示更多”放在一系列文章的特定行数的末尾…这是该库为一个文本块设法实现的…但当涉及到多行文本显示更多时，没有正确定位 我已就这一问题作了说明。我所希望的就是能够将多行文本的“显示更多”放在相同的位置，就像放在同一页上的文本块一样 我的第一次尝试是在truncateNestedNodeEnd函数中添加prev（） if ($clipNode.length) { if ($.inA
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);
}
}`
if（$clipNode.length）{
if（$.inArray（element.tagName.toLowerCase（），BLOCK_标记）>=0）{
//某些元素如不应附加到。
$element.after（$clipNode）；
}
其他的
{
//编辑此行以添加prev（）
//$element.append（$clipNode）
$element.prev（）.append（$clipNode）；
}
}`
这给了我多行文本所需的功能，但它破坏了plunker中显示的文本块的原始功能。如何使此函数适用于这两种情况。当这两篇文章放在同一页上时，我仍然想在黄色部分显示更多内容。我不确定我是否理解您的目标，但我认为您正试图使重复的span标记与“@belied Masaraure”文本的间距更加一致 如果是这样，我建议使用Chrome的Inspect功能或其他浏览器的类似功能检查生成的HTML 之所以出现奇数间距，是因为在最后一个span标记之前插入了不间断空格字符（ ；） 下面是我从您的plunker示例中提取的一些图像来展示这一点。 不知何故，生成的span标记中除了不间断的空格字符外没有任何内容
您的截断逻辑是否允许将空字符串或空格转换为这些带有不间断空格字符的span标记？这可能是显示问题的根本原因。我希望这有帮助。您正在尝试使用truncate来缩短已经很短的文本块。提及行不够长，无法打断，因此它在换行时打断，并且在到达换行时没有任何内容可截断。如果删除强制换行的div，则内容将到达换行的末尾并按预期换行。 当您在前一个元素之前附加“showmore”时，如果只有一个元素，那么它根本不起作用，就像您的第二段那样。
@JohnH提到的额外空格使格式很难看，但不会导致中断。问题是truncate.js递归地将$clipNode放在不同的容器中，如果truncation标志不正确，则将其删除。您的方法的问题是，您将附加到元素的上一个节点，对于列出的项，该节点为true，但对于没有上一个项的情况，则不为true（对于文本块）。这就是为什么在您的方法中，它没有在文本块中插入任何内容。我对代码做了如下更改，并在函数末尾添加了另一个append语句，这样一旦完成了$clipNode的追加，它就会将$clipNode容器移动到前面的元素（如果有）
if（$clipNode.length）{
if（$.inArray（element.tagName.toLowerCase（），BLOCK_标记）>=0）{
//某些元素如不应附加到。
$element.after（$clipNode）；
}否则{
//编辑此行以添加prev（）
//$element.append（$clipNode）
$element.append（$clipNode）；
}
}
if（$rootNode.height（）>options.maxHeight）{
如果（child.nodeType==3）{//text节点
truncated=truncateTextContent（$child，$rootNode，
$clipNode，选项）；
}否则{
truncated=truncateNestedNode（$child、$rootNode、$clipNode、，
选择权）；
}
}
如果（！截断&&$clipNode.length）{
$clipNode.remove（）；
}否则{
$element.prev（）.append（$clipNode）；
}