如何按行截断复杂的html答案

【问题标题】：How to truncate complex html by lines如何按行截断复杂的html
【发布时间】：2017-08-21 16:17:57
【问题描述】：

我正在尝试逐行截断复杂的 html，以便能够在达到一定数量的行后显示显示更多链接。我发现了一个很棒的库trunk8.js，它按行截断..但是在截断复杂的html时它不够用。因此，对于我的特殊情况，我覆盖了截断函数，以便我可以使用另一个截断函数来处理复杂的问题，该截断函数优雅地保留了复杂的 html 标签。截断对 html 很有效，但我被困在如何根据行数准确计算显示更多内容的位置

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

这是我迄今为止尝试过的plunker，我被困在 trunk8.js 中的 truncateHTML() 函数中，现在我只是根据字符串的最大长度截断。

【问题讨论】：

你有什么理由不设置 div 的大小并且有溢出：隐藏，然后让“显示更多”绝对位于右下角吗？您还可以检测 div 是否溢出，因此您可以隐藏/显示“显示更多”
感谢您的意见。最初我们是这样的，但产品团队要求显示更多链接必须是动态的，并且根据文本的长度或特定的行数与文本相邻。因此，我们在为不同的用户输入正确定位节目时遇到了问题

标签： javascript truncation

【解决方案1】：

尤里卡！！经过几次谷歌搜索和大量调试冲刺后，我偶然发现了一个库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

【讨论】：