文本显示指定行，多余的...,

html

<div :class="{ellipsis-class:fontMoreStatus}" ref="desc">
         {{fontNames?fontNames:'-'}}
          </div>
          <div v-if="isMoreBtn" @click="fontRiskShowAndHidden" style="cursor:pointer;text-align:center;color:rgb(102, 153, 255);">
            <span>更多</span>
            <Icon v-if="fontMoreStatus" type="ios-arrow-down" />
            <Icon v-else type="ios-arrow-up" />
          </div>
        </div>

js

 mounted() {
//判断是否显示更多按钮
     this.fontNamesValue = this.fontNames;
     // console.log(this.$refs.desc.scrollHeight);//内容撑的真实高度
     if(this.$refs.desc.scrollHeight>60){
       this.isMoreBtn = true;
     }
   },
methods:{
    fontRiskShowAndHidden(){
       this.fontMoreStatus = !this.fontMoreStatus;
     },
   }

样式

.ellipsis-class{
  display:-webkit-box;
    overflow: hidden;
    white-space:normal!important;
    text-overflow: ellipsis;
    word-wrap:break-word;
    -webkit-line-clamp:3;
    -webkit-box-orient: vertical;
    line-height: 20px;
    max-height: 60px;
}