<template> <div ref="el-ellipsis-display" class="el-ellipsis-display"> <el-popover placement="top-start" trigger="hover"  popper-class="more-popper" :disabled="isPopoverShow || ! showPop" :content="content" > <div slot="reference"> <div :class="isMore ? [] : ['multi-ellipsis--l' + limit]" :style="{ maxWidth: maxWidth, lineHeight: `${lineHeight}px` }" @mouseenter="showPopover"> <span ref="heightView">{{ content }}</span> </div> </div> </el-popover> </div> </template> <script> export default {name: 'ElEllipsisDisplay', props: {// popover maxWidth: {type: String, default: () => '100%'}, // Display content: {type: String, default: () => ''}, // use this to calculate whether to omit the display lineHeight: {type: Number, default: () => 34}, // display several lines by default LIMIT: {type: Number, default: () => 1}, { type: Boolean, default: () => true } }, data() { return { isPopoverShow: false, isMore: false, isOverHeight: false } }, watch: { content: function() { this.$nextTick(() => { this.computeOverHeight() }) } }, mounted() { this.computeOverHeight() }, methods: { computeOverHeight() { this.isOverHeight = this.$refs.heightView.offsetHeight > (this.lineHeight * this.limit) }, showPopover() { this.computeOverHeight() if (this.isOverHeight && ! this.isMore) { this.isPopoverShow = false } else { this.$nextTick(() => { this.isPopoverShow = true }) } } } } </script>  <style scoped lang="scss"> @for $i from 1 through 1000 { .multi-ellipsis--l#{$i} { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: #{$i}; /* autoprefixer: ignore next */ -webkit-box-orient: vertical; span { word-wrap: break-word; white-space: normal; } } } </style>Copy the code

Resources: elementui.jujiaotech.com/#/zh-CN/com…