当某个类存在时，jQuery 将 div 字符限制为 90

Posted 2023-03-06

【中文标题】当某个类存在时，jQuery 将 div 字符限制为 90

【英文标题】：jQuery limit div characters to 90 when a certain class is there

【发布时间】：2015-11-25 00:52:07

【问题描述】：

我正在尝试将元素的字符通常限制为 90 个单词。但是当点击显示更多按钮时，它应该会取消限制。

我尝试使用一个类来执行此操作并将限制附加到该类，然后在单击显示更多按钮时删除该类。

我的尝试：

        <header>
           <h1>Heading Goes Here</h1>
           <p class="jumbo-p non-exp">
               The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
           </p>
           <a href="#" class="more1">more</a>
       </header> 

CSS：

     .jumbo-pdisplay: inline-block; height: 20px; overflow: hidden;
     .more1 position: relative; left: 2px; top: -21px;
     .jumbo-p.expanded+.more1 display: none
     .jumbo-p.expanded height: auto;

让这一切工作的 jQuery：

        $(".non-exp").text(function(index, currentText) 
            return currentText.substr(0, 90) + '...';
        );
        $(document).on('click', '.more1', function(event) 
            event.preventDefault();
            $('.jumbo-p').toggleClass('expanded');
            $('.jumbo-p').removeClass('non-exp');
        );

这对 div 设置了限制，但在删除类时不会删除该限制。请帮忙。

【问题讨论】：

我认为使用 text-overflow css 属性可以做到这一点。

text-overflow 会根据 div 的宽度来限制它。我想根据字符长度限制它

jsfiddle.net/z0vghqy5/1 或许能帮到你。

【参考方案1】：

问题是您已将文本替换为“...”。您需要通过将原始文本存储在某处并在单击“更多”按钮时再次显示它来撤消此更改。

还有一件事，我看到你这么说

text-overflow 会根据 div 的宽度来限制它。我想根据字符长度来限制它

可以根据字符数设置div的宽度，像这样

width: 90ch;

但是，可能存在一些浏览器兼容性问题。更多信息请访问Specify width in *characters*

【讨论】：

这很好，但是 ch 作为宽度仍然没有得到广泛支持，我需要支持 IE8 及更高版本。但在未来，这将是一个很棒的方法，所以赞成

【参考方案2】：

将原始文本存储在变量中并在单击时重新插入。

var text = $(".non-exp").text();    
$(".non-exp").text(function(index, currentText) 
        return currentText.substr(0, 90) + '...';
    );
$(document).on('click', '.more1', function(event) 
    event.preventDefault();
    $(".non-exp").text(text);
    $('.jumbo-p').toggleClass('expanded');
    $('.jumbo-p').removeClass('non-exp');
);