jquery - Jquery dotdot.js 插件对于带有 html 元素的文本无法正常工作

Question

我正在为我的项目使用 dotdotdot.js。
最近，我添加了一个富文本编辑器 (tinymce)，文本现在有一些 html 元素，如 p、a、b、i 等
。dotdotdot 无法按预期工作。

这是小提琴：http: //jsfiddle.net/dgkdN/

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

请找到显示以下问题的屏幕截图：

“Useruuu”文本应该完全显示出来。但它被切断到其垂直高度的一半。这就是我面临的问题。
我想正常显示它，我的意思是，线条的全高。或者如果它不能占用可用的垂直高度，则只显示“...”

请帮忙！

Answer 1

p是具有默认填充的块元素。您可以删除/替换此填充

.dotdotdot p {
     padding:0;
    }

或者您可以将p（以及富文本编辑器放置的其他块元素）设置为inline.

.dotdotdot > * {
  display: inline;
}

Answer 2

overflow: hidden从你的小提琴中删除：

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

见小提琴