js写多余文字用省略号表示,点击可显示隐藏

因为是多段文字的隐藏,用js写比较麻烦,索性用jquery写了

  • html部分
    <div>
        <p class="word-length">
            超过20个字多余隐藏超过20个字多余隐藏超过20个字多余隐藏超过20个字多余隐藏超过20个字多余隐藏超过20个字多余隐藏
        </p>
        <span class="btn">[展开]</span>
    </div>
    <div>
        <p class="word-length">
            超过20个字多余隐藏超过20个字多余隐藏超过20个字多余隐藏超过20个字多余隐藏
        </p>
        <span class="btn">[展开]</span>
    </div>
    <div>
        <p class="word-length">
            没超过20个字
        </p>
        <span class="btn">[展开]</span>
    </div>
  • js部分
    <script type="text/javascript">
    window.onload = function(){
        var wordLength = function(a,b){//a是文字的class,b是按钮的class
            var ininWordArr = [];//用来存储所有段落的文字
            var nowWordArr = [];//用来存储隐藏后所有段落的文字
            $(a).each(function(){
                var initWordLength = $(this).html().length;//当前段落文字的长度
                var ininWord = $(this).html();
                ininWordArr.push(ininWord);
                var nowWord;
                if (initWordLength>20) {
                    nowWord = $(this).html().substr(0,20)+'......';
                } else {
                    nowWord = $(this).html();
                    $(this).next().css('display','none');
                }   
                $(this).html(nowWord);
                nowWordArr.push(nowWord);
            })
            $(document).on('click',b,function(){
                var i = $(b).index($(this));
                if ($(this).html() == '[展开]') {
                    $(this).html('[收起]');
                    $(this).prev().html(ininWordArr[i]);
                } else {
                    $(this).html('[展开]');
                    $(this).prev().html(nowWordArr[i]);
                }
                return false;
            })
        }('.word-length','.btn')
    }
    </script>
### 回答1: CSS 中可以使用省略号(ellipsis)来显示省略的文本内容,以达到多余文本隐藏效果。 在 CSS 中,可以通过使用 text-overflow 属性来实现省略号的效果。该属性的值通常是 ellipsis,表示使用省略号显示多余文本内容。 例如,以下代码将文本框中多余文本内容隐藏,并使用省略号表示: ``` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ``` 其中,overflow 属性设置为 hidden,表示超出文本框范围的内容将被隐藏。white-space 属性设置为 nowrap,表示文本不会换行。 以上代码可以适用于大部分文本框,但是在一些情况下可能需要根据具体的需求进行调整。 ### 回答2: 在CSS中,如果希望当文字内容过多时能够显示省略号,可以使用text-overflow属性。它经常与white-space和overflow属性一起使用。 首先,将white-space属性设置为nowrap,这样文字就会在一行内显示,不会换行。然后,将overflow属性设置为hidden,这样超出容器宽度的文字将被隐藏。 接着,使用text-overflow属性来指定省略号显示方式。常用的取值有: - clip:超出容器宽度的文字被裁剪隐藏。 - ellipsis:超出容器宽度的文字显示省略号。 如果配合使用了white-space和overflow属性,并且需要显示省略号,可以将text-overflow属性设置为ellipsis。 同时,为了让省略号生效,还需要设置容器的宽度。可以使用width属性来指定容器的宽度。 以下是一个示例的CSS代码: ``` CSS .container { width: 200px; /* 设置容器的宽度 */ white-space: nowrap; /* 文字在一行内显示 */ overflow: hidden; /* 超出容器宽度的文字隐藏 */ text-overflow: ellipsis; /* 超出容器宽度的文字显示省略号 */ } ``` 使用上述CSS代码,可以实现当文字过多时显示省略号的效果。 ### 回答3: 在CSS中,我们可以使用text-overflow属性来实现多余文字显示省略号。 首先,要让文本内容能够被省略,我们需要设置一个固定的宽度或者最大宽度给包裹文本内容的元素,例如一个div或者一个段落(p)。 接下来,我们可以通过设置white-space属性为nowrap来让文本内容在一行显示,这样多余文字就会溢出元素。 然后,我们使用overflow属性来显示溢出的内容。一般来说,我们会使用overflow: hidden来隐藏溢出的内容,这样超出宽度的部分就不会显示出来。 最后,我们通过设置text-overflow属性为ellipsis来显示省略号。这样,当文字超出宽度时,省略号显示文本末尾,表示文本的截断。 以下是一个例子的CSS代码: ```css .container { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` 上面的代码将一个宽度为200px的容器中的文本内容进行省略显示,超出宽度的部分将显示省略号。 需要注意的是,text-overflow属性只在某些浏览器中支持,所以在使用时需要进行兼容性的考虑。有时候,我们还需要配合使用其他的CSS属性来实现更复杂的效果,例如通过伪元素来添加省略号等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值