二次开发element组件 el-tooltip+span 超出文本部分显示省略号鼠标悬浮显示全部内容 EllipsisTooltip.vue（我是放置在了src/components）
<template> <!-- :disabled="disabledTip" --> <el-tooltip ref="tlp" :content="text" effect="dark" :disabled="!tooltipFlag" :placement="placement" class="tooltip" > <span :class="className" @mouseenter="visibilityChange($event)">{{ text }}</span> </el-tooltip> </template> <script> export default { name: 'EllipsisTooltip', props: { text: { type: String, default: '' }, // 字符内容 placement: { type: String, default: 'top-start' }, className: { type: String, default: 'text' } // class }, data() { return { disabledTip: false, tooltipFlag: false } }, methods: { // tooltip的可控 visibilityChange(event) { const ev = event.target const ev_height = ev.offsetHeight // 文本的实际高度 const content_height = this.$refs.tlp.$el.parentNode.clientHeight // 文本容器高度 if (content_height < ev_height) { // 实际内容高度 > 文本高度 =》内容溢出 this.tooltipFlag = true // NameIsIncludeWord ? true : !!false } else { // 否则为不溢出 this.tooltipFlag = false } } } } </script>css
//el-tooltip二次封装 .tooltip-wrap { height: 16px; // 必须要有高度设置，因为tooltip的显示条件是通过高度来判断的 display: inline-block; display: -webkit-box; -webkit-line-clamp: 1; // 因为通过高度所以只显示一行，溢出显示省略号 -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all;//英文数字折行 span{ line-height: 1.3;//这个行高看自定义样式文本高度 } }页面调用
<template> <div class="tooltip-wrap"> <ellipsis-tooltip text="产品94958438产品94958438产品94958438产品94958438" ></ellipsis-tooltip> </div> </template> <script> import EllipsisTooltip from '@/components/EllipsisTooltip.vue'//根据路径导入组件 export default { name:'singeProductView', data () {}, components:{//在页面引用组件 EllipsisTooltip } } </script>