Truncating multiline html text using truncate.js

Question

I found a wonderful html truncation library, truncate.js, which handles about 99% of my needs. But I have one nagging issue I am facing. I have a requirement that requires 'Show more' be placed on the end of a specific number of lines for a series of posts...which this library manages to achieve for a block of text..but when it comes to multiline text show more is not positioned properly.

I have made a plunker to demonstrate the issue . All I want is to be able to place show more in the same position for multiline text the same way it appears for a block of text sitting on the same page.

My first try was to add prev() in 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 multiline text, but it then breaks the original functionality for a block of text as shown in the plunker. How can I make this function work for the two cases. I still want to Show more to appear on the yellow part, when these two posts are sitting on the same page.

Why do you use a useless js to do what you can achieve with css? You can still do it without any library too — Marco Salerno, Sep 08 '17 at 13:40
@MarcoSalerno I do not think the use of js is useless in this regard. Css only would not achieve what I needed. . We initially used css but it did not meet this following requirement "truncation text should display immediately after the last line of the dynamic text either in a paragraph or multiline text". With css we managed to absolutely position the "Show more" to the right..which works great but that is not what we wanted..."show more" should be appended next to the text depending on its length. — abidmix, Sep 09 '17 at 00:45

JohnH · Answer 1 · 2017-09-07T12:45:48.520

I'm not sure that I understand your objective, but I think that you are trying to get the spacing to be more consistent for the repeated span tags with the "@Abide Masaraure" text.

If that is so, I suggest examining the generated HTML using Chrome's Inspect feature or a similar function from another browser.

The odd spacing seems to occur because of non-breaking space characters (&nbsp ;) being inserted just before the last span tag.

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

Somehow span tags are being generated with nothing in them but the non-breaking space characters.

Could your truncation logic somehow allow empty strings or spaces to be converted into these span tags with non-breaking space characters? That may be the root cause of your display issues. I hope this helps.

score 1 · Answer 2 · answered Sep 08 '17 at 16:49

You are trying to get truncate to shorten an already short block of text. The mention line isn't long enough to break, so it breaks on the newline, and there isn't any content to truncate when it reaches the newline. If you remove the divs that are forcing the short lines, then the content reaches the end of the line and wraps as you expect it to. When you append the "showmore" before the previous element, then it doesn't work at all if there is only one element, as in the case of your second paragraph. The extra spaces mentioned by @JohnH make the formatting ugly but isn't causing the break.

score 1 · Accepted Answer · answered Sep 08 '17 at 20:05

The problem is the truncate.js recursively puts the $clipNode in different containers and removes them if the truncation flag is not true. The problem with your approach was that you were appending to the previous node of the element which was true in the case of listed items but not true in case there was no previous item (As in the case of text block). That is why in your approach it wasn't inserting anything in the text block. I have changed the code as follows and added another append statement at the end of the function so that once it's finished appending $clipNode, It then moves that $clipNode container to the previous element if there is 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 have solved

enter image description here

Please also refer to the updated code in the Plunker

Truncating multiline html text using truncate.js

3 Answers3