如果文本超过一定长度，请应用CSS

Question

如果元素中的文本超过一定长度，是否有办法将CSS应用于元素。 例如<p class="foo">123456789</p> 。

然后，当元素中的文本超过x个字符时，将应用新类

<p class="foo text-exceeds-X-chars">12345678910101010101</p>

Answer 1

使用jQuery text（） ，然后使用length 。 如果满足条件，请使用addClass（）来应用该类

if($('p.foo').text().length > 20){
    $('p.foo').addClass('my-class');
}

如果您有多个p.foo元素，请执行

$('p.foo').each(function(){
    if($(this).text().length > 20){
        $(this).addClass('my-class');
    }
});

Answer 2

我建议使用addClass回调函数：

$('p.foo').addClass(function() {
    return $.trim(this.textContent).length > 10
           ? 'text-exceeds-X-chars'
           : null;
});

Answer 3

没有内置过滤器或选择器，因此您必须手动执行此操作。 我们的想法是选择所有有问题的元素并在循环中测试每个元素的长度：

$('.foo').each(function() {
    if ($(this).text().length > x) {
        $(this).addClass('text-exceeds-X-chars');
    }
});