基于元素内容的文本淡出

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>

因此，我首先检查是否存在带有“.‘s documentBox”的元素，然后对找到的每个元素检查它的内容是否超过20个字符，如果是真的，我将添加'test-class’。问题是，在测试类中，我需要css，它将产生与以下代码相同的效果：

overflow: hidden;
text-overflow: ellipsis;

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

Answer 1

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

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

编辑：

只是试了一下--你也应该使用width，否则你就看不到效果了

这是我的小提琴链接

Answer 2

text-overflow只适用于块级元素(默认情况下是内联的)，因此您需要将跨域设置为div(或其他块级元素)，或者更改它的样式以包括类似display:block的内容。