Question

这是我的JS：

Userform

这是我的HTML：

Userform

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

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

有任何建议如何获得相同的效果？

Answer 1

text-overflow仅适用于块级元素（默认情况下跨度为内联），因此您需要将跨度转换为div（或其他块级元素）或更改它们样式包括display:block。

之类的内容

Answer 2

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

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

修改

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

继承我的小提琴LINK

文本根据元素内容淡出

2 个答案: