Truncate multi-line html text with truncate.js

Question

I found a wonderful html truncation library, truncate.js that handles about 99% of my needs. But I have one unpleasant problem that I am facing. I have a requirement that requires “Show more” to be placed at the end of a certain number of lines for a series of messages ... that this library manages to achieve for a block of text ... but when it comes to multi-line text shows, it is no longer set correctly.

I did a plunker to demonstrate this problem. All I want is to be able to place more in the same position for multi-line text as well as for a block of text sitting on the same page.

My first attempt was to add prev () to the truncateNestedNodeEnd function

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); } }` 

Which gives me what I want for multi-line text, but then breaks down the original functionality for a block of text, as shown in the plunker. How can I make this function work for two cases. I still want to show more to appear on the yellow part when these two entries are sitting on the same page.

Answer 1

The problem is that truncate.js recursively puts $ clipNode in different containers and removes them if the truncation flag is not true. The problem with your approach was that you added to the previous node an element that was true in the case of the listed elements, but was not true if there were no previous element (as in the case of a text block). That is why in your approach it did not insert anything into the text block. I changed the code as follows and added another append statement at the end of the function, so that after adding $ clipNode, it then moves this $ clipNode container to the previous element, if any.

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

And the problem seemed to solve

enter image description here

Also see updated code in Plunker

Answer 2

I'm not sure I understand your purpose, but I think you are trying to make the spacing more consistent for duplicate span tags with the text "@Abide Masaraure".

If so, I suggest exploring the generated HTML using the Chrome Inspect function or a similar function from another browser.

The odd distance seems to be due to the fact that non-breaking space characters (& nbsp;) are inserted immediately before the last span tag.

Here are some images that I pulled from your plunker example to show this.

Somehow span tags are generated without anything in them except inextricable spaces.

Can your truncation logic somehow allow empty lines or spaces to convert to these span tags with inextricable whitespace characters? This may be the main cause of display problems. Hope this helps.

Answer 3

You are trying to get truncation to cut an already short block of text. The reference line is not long enough to break, so it breaks on a new line, and there is no content to truncate when it reaches a new line. If you remove divs that force short lines, the content goes to the end of the line and wraps as you expect. When you add "showmore" in front of the previous item, then this does not work at all if there is only one item, as is the case with your second paragraph. The extra spaces mentioned by @JohnH make formatting ugly, but don't cause a break.