Jquery dotdotdot.js plugin not functioning properly for text with html elements

Question

I am using dotdotdot.js for my project.
Recently, I added a rich-text editor (tinymce), and the text now has some html elements like p,a,b,i, etc.
dotdotdot is not working as expected for this text.

Here is the fiddle: http://jsfiddle.net/dgkdN/

$(".text-ellipsis").dotdotdot({
    watch: "true", 
    after: ".read-more", 
    callback: function (isTruncated, orgContent) {
        if (isTruncated) {
            $('.read-more', this).show();
        }
    }
});

Please find the screenshot showing the problem below: enter image description here

The "Useruuu" text should show up fully. But it is cut off to half its vertical height. That is the problem that I am facing.
I want to show it normally, I mean, full height of the line. Or show only "..." if it cant take up the available vertical height

Please help!

Seems to work for me, but you haven't really said what your expectation is — ediblecode, May 06 '14 at 11:30
@jumpingcode: Added the screenshot in the question. Pls check — EvilDevil, May 06 '14 at 11:35
The "Useruuu" text should show up fully. But it is cut off to half its vertical height. That is the problem that I am facing. I want to show it normally, I mean, full height of the line. Or atleast show "..." if it cant take up the available vertical height — EvilDevil, May 06 '14 at 11:39
Thanks for pointing out the mistake in framing the question. Hope I clarified it — EvilDevil, May 06 '14 at 11:42

score 0 · Answer 1 · answered May 06 '14 at 12:00

0

Remove overflow: hidden from your fiddle:

.text-ellipsis{ max-height:27px; width:100%; }

SEE FIDDLE

answered May 06 '14 at 12:00

ediblecode

11,701
19
68
116

But there is no "..." after "Useruuu" to show that the text is truncated – EvilDevil May 06 '14 at 12:02
@EvilDevil `dotdotdot` only truncates text wrapped in a `.text-ellipsis` class. Your first class of this type has enclosing HTML elements, i.e. `
`
– ediblecode May 06 '14 at 17:02

score 0 · Answer 2 · answered Mar 18 '15 at 12:27

The p is a block element with a default padding. You can either remove/replace this padding

.dotdotdot p {
     padding:0;
    }

or you can set the p (and other block elements placed by rich text editor, too) to inline.

.dotdotdot > * {
  display: inline;
}

Jquery dotdotdot.js plugin not functioning properly for text with html elements

2 Answers2