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.