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);//內(nèi)容撐的真實高度
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;
}
