一、引入jq和jquery.dotdotdot.min.js

二、html結構

點擊之後

<div class="detail-content">
<p>新房和二手房各有優缺點。主要有一下區別：</p>
<p> 1、交易條件不同 </p>
<p>開發商將新房出售給購房者的前提條件是：開發商需要 取得五證二書。</p>
<p> 2、買房首付、貸款額度不同 </p>
<p>開發商將新房出售給購房者的前提條件是：開發商需要 取得五證二書。</p>
<p> 3、交易條件不同 </p>
<p>開發商將新房出售給購房者的前提條件是：開發商需要 取得五證二書。</p>
</div>
<!--全部按鈕-->
<div class="all-btn">
<button type="button">全部</button>
</div>

三、css樣式

//答內容
        .detail-content {
            padding-left: 0.4rem;
            height: 1.3rem;
            overflow: hidden;
            p {
                font-size: 0.28rem;
                line-height: 1.5;
                color: @color-txt-subtitle;
            }
        }
        .opened{
            height: auto;
        }
 

四、插件使用

//點擊全部按鈕，展開內容
        var $dot = $(‘.detail-content‘);
            $dot.dotdotdot({});
        $("#hot-questio-list").on(‘click‘,‘button‘,function() {
            var $detail=$(this).parent().siblings(‘.detail-content‘);
                $detail.toggleClass(‘opened‘);
                if($dot.hasClass(‘
 
opened‘)) {
                    $detail.trigger(‘destroy‘);
                    $(this).text(‘折疊‘);
                } else {
                    $detail.dotdotdot({});
                    $(this).text(‘全部‘);
                }
                return false;
            }
        ）；

JQ多行文本溢出省略號插件