如何按行截断复杂的html

Question

我试图按行截断复杂的html，以便能够在达到一定数量的行后显示更多链接。我找到了一个很棒的库trunk8.js，它按行截断..但是如果在截断复杂的html时不尽如人意的话。因此，对于我的特殊情况，我覆盖截断函数，以便我可以使用另一个截断函数来处理复杂，该函数优雅地保留复杂的html标记。截断将与html一起运行很好，但我仍然坚持如何根据行数准确计算放置更多内容

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

这是我到目前为止所尝试的plunker，我被困在trunk8.js中的truncateHTML（）函数中，我现在只根据字符串的最大长度进行截断。

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

                }
        }

如果有人在过去遇到过这个问题，我已经发布了我修订过的问题here