Jquery 基于元素内容的文本淡出

这是我的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>

---

如何达到同样的效果，有什么建议吗

仅适用于块级元素（默认情况下，跨距是内联的），因此您需要将跨距设置为div（或其他块级元素），或者更改其样式以包含类似于

display:block

的内容，只需添加

display:inline block测试类：

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

编辑：

刚刚试过-您还应该使用
宽度
，否则您将看不到效果

这是我的小提琴
如果你张贴一张小提琴来展示你现在拥有的东西，我可以修改它来展示你需要改变的东西。如何解决此对齐问题元素具有不同的高度和浮动：左；为了测试课堂，我更新了你的小提琴。
.test-class {
   overflow: hidden;
   text-overflow: ellipsis;
   display:inline-block;
   width:150px;
}