jquery.dotdotdot sections not showing up

Question

I'm creating read more/read less links for sections of text using jquery.dotdotdot. The text isn't displaying for sections where I have multiple p tags. Not quite sure what the issue is. I've included my code in a fiddle below.

I appreciate any help! Thanks!

View Full Code Here

$(function () {
    var addLink = $('.securetext');
        addLink.append('<span class="readmore trigger-js">&nbsp;<a >Read more</a></span>');
        for (i = 0; i < addLink.length; i++) {
            if ($(addLink[i]).children("p").length > 0) {
                $(addLink[i]).children("p").last().append('<span class="readless trigger-js">&nbsp;<a >Read less</a></span>');
            } else {
                $(addLink[i]).append('<span class="readless trigger-js">&nbsp;<a >Read less</a></span>');
            }
        }
        truncateIfNeeded(); // Initialize ellipsis
    });

var truncateIfNeeded = function (jqueryTag) {
    var $selectionToTruncate = jqueryTag || $('.securetext');

    $selectionToTruncate.dotdotdot({
        ellipsis: '... ',
        watch: true,
        //wrap    : 'letter',
        height: 20 * 3, // max number of lines
        after: '.readmore',
        callback: function (isTruncated, orgContent) {
            var $currentReadMore = $(this).find('.readmore');
            var $currentReadLess = $(this).find('.readless');

            if (isTruncated) {
                $(this).addClass('securetext--is-truncated');
                $(this).removeClass('securetext--is-not-truncated');
            }
            bindReadMore(); // bind click on "read more"
        }
    });
};

If you look at the fiddle you'll notice the second section, under Test 2, isn't displaying at all. — sgolemme, Apr 08 '15 at 11:46
Hmm I just looked cross browser and it looks like it is working in Safari, but not in Chrome, Firefox, or IE8. — sgolemme, Apr 08 '15 at 11:53
So far I've found that it has to do with the `after` selector not being an element present in the truncated paragraph. If you remove the `after` option you get the first paragraph correctly. Still looking into why this is. — Interrobang, Apr 20 '15 at 05:39

score 0 · Answer 1 · answered Apr 20 '15 at 06:22

The issue is with the algorithm used to truncate.

In the first iteration, the Read More... link is added after the paragraph (which happens to be exactly 3 lines long). This means that the truncation logic is invoked.

In the second iteration, the Read More... is added inside the paragraph. The entire thing then fits into 3 lines, and so it's removed. This is clearly a bug.

The issue describing the bug on GitHub was closed as wontfix.

This pull request provides a partial fix, but it won't show an ellipsis in the case that an element is truncated between paragraphs. (The read-more link will show up, though.)

jquery.dotdotdot sections not showing up

1 Answers1