使用 truncate.js 截断多行 html 文本
Truncating multiline html text using truncate.js
我找到了一个很棒的 html 截断库 truncate.js,它可以满足我大约 99% 的需求。但我面临一个棘手的问题。我有一个要求,要求将 'Show 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 中所示。我怎样才能让这个功能适用于这两种情况。当这两个帖子位于同一页面时,我仍然希望显示更多内容以显示在黄色部分。
我不确定我是否理解您的 objective,但我认为您正在尝试使带有“@Abide Masaraure”文本的重复 span 标签的间距更加一致。
如果是这样,我建议使用 Chrome 的检查功能或其他浏览器的类似功能检查生成的 HTML。
由于在最后一个 span 标记之前插入了不间断的 space 个字符 (  ;),所以出现了奇怪的间距。
以下是我从您的 plunker 示例中提取的一些图像以显示这一点。
以某种方式生成的 span 标签中除了不间断的 space 个字符外什么都没有。
您的截断逻辑能否以某种方式允许将空字符串或 space 转换为这些具有不间断 space 字符的跨度标记?这可能是您显示问题的根本原因。希望对您有所帮助。
您正在尝试截断以缩短已经很短的文本块。提及行不够长,无法换行,因此它在换行符处换行,并且当它到达换行符时没有任何内容可截断。如果您删除强制短行的 div,则内容会到达行尾并按您预期的方式换行。
当您在前一个元素之前附加 "showmore" 时,如果只有一个元素,它根本不起作用,就像第二段的情况一样。
@JohnH 提到的额外空格使格式变得难看,但不会导致中断。
问题是 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
中的更新代码
我找到了一个很棒的 html 截断库 truncate.js,它可以满足我大约 99% 的需求。但我面临一个棘手的问题。我有一个要求,要求将 'Show 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 中所示。我怎样才能让这个功能适用于这两种情况。当这两个帖子位于同一页面时,我仍然希望显示更多内容以显示在黄色部分。
我不确定我是否理解您的 objective,但我认为您正在尝试使带有“@Abide Masaraure”文本的重复 span 标签的间距更加一致。
如果是这样,我建议使用 Chrome 的检查功能或其他浏览器的类似功能检查生成的 HTML。
由于在最后一个 span 标记之前插入了不间断的 space 个字符 (  ;),所以出现了奇怪的间距。
以下是我从您的 plunker 示例中提取的一些图像以显示这一点。
以某种方式生成的 span 标签中除了不间断的 space 个字符外什么都没有。
您的截断逻辑能否以某种方式允许将空字符串或 space 转换为这些具有不间断 space 字符的跨度标记?这可能是您显示问题的根本原因。希望对您有所帮助。
您正在尝试截断以缩短已经很短的文本块。提及行不够长,无法换行,因此它在换行符处换行,并且当它到达换行符时没有任何内容可截断。如果您删除强制短行的 div,则内容会到达行尾并按您预期的方式换行。 当您在前一个元素之前附加 "showmore" 时,如果只有一个元素,它根本不起作用,就像第二段的情况一样。 @JohnH 提到的额外空格使格式变得难看,但不会导致中断。
问题是 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
中的更新代码