vue 超过两行省略号表示，出现‘全部’按钮，点击全部，将评论全部展示出来。

 

使用说明超出一行出现向下的 iconfont ,超出的文字用省略号代替， 点击iconfont 后，箭头向上，使用说明全部展示不出现省略号。效果如下

<div class="tips item_b">
                    <span class="text" :class="{ nowrap: isFold}" style="width:5.34rem;" >
                        使用说明：盒马生鲜全场使用，满30元立减15元
                        使用说明：盒马生鲜全场使用，满30元立减15元
                        使用说明：盒马生鲜全场使用，满30元立减15元
                        使用说明：盒马生鲜全场使用，满30元立减15元
                    </span>
                    <span 
class="iconfont iconxiala" 
style="color:#CCCCCC;font-size:.32rem;" 
:style="'transform:rotate('+ arrowRotate+'deg)'" 
@click="foldCoupon"></span>
                    </div>

foldCoupon(){
        this.arrowRotate = this.arrowRotate==180?0:180;
        this.isFold = !this.isFold
    },

 

.nowrap{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
.item_b{
            background: #fff;
            padding: 0.14rem 0.3rem;
            display: flex;
            position: relative;
            transition: 0.5s;
            border-bottom-left-radius: 0.1rem !important;
            border-bottom-right-radius: 0.1rem !important;
            .iconfont{
                transition: 0.5s;
                position: absolute;
                right: 0.24rem;
            }
        }