简体   繁体   English

如何用行截断复杂的html

[英]How to truncate complex html by lines

I am trying to truncate complex html by lines in order to be able to display a show more link after a certain number of lines has been reached. 我试图按行截断复杂的html,以便能够在达到一定数量的行后显示更多的链接。 I found a great library trunk8.js which truncates by lines..but if falls short when it comes to truncating complex html. 我找到了一个很棒的库trunk8.js,它可以按行截断..但是如果要截断复杂的html则不够。 So for my particular case I overrode the truncate function so that I can handle complex the using another truncation function which gracefully leaves complex html tags intact. 因此,对于我的特殊情况,我覆盖了truncate函数,以便我可以使用另一个截断函数来处理复杂的问题,该函数可以将复杂的html标签完整地保留下来。 Truncation will work great with html but I am stuck on how to accurately calculate where to put show more more based on the number of lines 截断将与html一起很好地工作,但是我仍然坚持基于行数来精确计算要显示的位置

在此处输入图片说明

As seen in the image above I am trying to truncate to 7 lines but if the user input contains white spaces shown in yellow my calculations will be wrong because I am not accounting for the white spaces. 如上图所示,我试图将其截断为7行,但是如果用户输入包含以黄色显示的空白,则我的计算将是错误的,因为我没有考虑空白。 My initial line of thought was that if I can calculate the length of the spaces in yellow for each line and convert it to characters, I can add this offset to the maximum number number of characters, then I can know where to put approximately the show more link. 我最初的想法是,如果我可以计算出每行黄色的空格长度并将其转换为字符,则可以将此偏移量添加到最大字符数,然后就可以知道在哪里放大概的演出更多链接。 Is this the best approach to this problem and if not ,any suggestions to make my life easier. 这是解决这个问题的最佳方法吗?如果没有,那么建议可以使我的生活更轻松。

This is a plunker of what I have tried so far and I am stuck in my truncateHTML() function in the trunk8.js where I am only now truncating based on the maximum length of the string. 这是到目前为止我尝试过的大手笔 ,我被困在trunk8.js的truncateHTML()函数中,在这里我只是根据字符串的最大长度来截断。

Eureka!! 尤里卡! After a couple of google searches and heavy debugging sprints, I stumbled upon a library truncate.js which I customized the truncatedNestednode() function for my needs. 经过几次Google搜索和繁重的调试冲刺之后,我偶然发现了一个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);

                }
        }

In case someone faced this problem in the past, I have posted my revised plunker here 万一以前有人遇到过这个问题,我在这里贴了我的修改过的矮人

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM