如何按行截断复杂的html

我想按行截断复杂的html，以便能够在达到一定数量的行后显示更多链接。我发现了一个很棒的库trunk8.js，它被截断了......但如果在截断复杂的html的时候不够用的话。因此，对于我的特殊情况，我会覆盖truncate函数，以便我可以处理复杂的使用另一个截断函数，它可以完整地保留复杂的html标记。截断将工作的伟大与HTML，但我坚持了如何精确地计算出在哪里把显示更多更是以线如何按行截断复杂的html

的数量作为图像中看到上面我试图截断7行但是如果用户输入包含以黄色显示的空格，我的计算就会出错，因为我没有考虑到空格。我最初的想法是，如果我可以计算每行的黄色空格的长度并将其转换为字符，我可以将此偏移量添加到最大字符数，然后我可以知道应该在哪里放大约节目更多链接。这是解决这个问题的最好方法吗？如果不是的话，任何建议都可以让我的生活更轻松。

这是我到目前为止尝试过的一个plunker，而我卡在我的truncateHTML（）函数中的trunk8.js中，现在我只根据字符串的最大长度截断。

来源

2017-08-21 Abide Masaraure

是否有任何理由你不设置div的大小，并有溢出：隐藏，然后“显示更多”只是绝对位于右下角？你也可以检测到div是否溢出，所以你可以隐藏/显示“显示更多” – Keith

感谢您的输入。最初我们是这样做的，但产品团队要求显示更多链接必须是动态的，并且与文本相邻，取决于文本的长度或特定行数。所以我们遇到了问题，为不同的用户输入更正确地定位节目 –

尤里卡！经过几次谷歌搜索和大量调试冲刺后，我偶然发现了一个库truncate.js，我为我的需要定制了truncatedNestednode（）函数。

element.appendChild(child); 
     /** Customized--here **/ 
     var clonedNode = {}; 
     if ($clipNode.length) { 
      if ($.inArray(element.tagName.toLowerCase(), BLOCK_TAGS) >= 0) { 
       // Certain elements like <li> should not be appended to. 
       $element.after($clipNode); 
      } 
      else 
      { //Removed the commented line to put showmore next to the last line of text 
       $element.prev().append($clipNode); 
       //$element.append($clipNode); 

       } 
     }

，以防有人面对过去这个问题，我已经发布了新修改的plunker here

来源

2017-08-25 17:03:55

如何按行截断复杂的html

回答

相关问题