jquery - 文本根据元素内容淡出

Question

这是我的 JS:

if($('.js-documentBox').length){
    $('.js-documentBox').each(function(){
        if($(this).text().length > 20){
            $(this).addClass('test-class');
        }
    });
}

这是我的 html:

<span class="js-documentBox">6227_150510_0510175608II</span>

所以，首先我检查带有“.js-documentBox”的元素是否存在，然后对于每个找到的元素，我检查它的内容是否超过 20 个字符，如果是，我将添加“测试类”。问题是在测试类中我想要 css，它会产生与这段代码相同的效果:

overflow: hidden;
text-overflow: ellipsis;

有什么建议可以达到同样的效果吗？

Answer 1

只需添加 display:inline-block; 到测试类:

.test-class {
   overflow: hidden;
   text-overflow: ellipsis;
   display:inline-block;
   width:150px;
}

编辑:

刚刚试过了 - 你也应该使用 width 否则你看不到效果

这是我的 fiddle LINK