<template> <div class="text-container rel" @mouseenter="handleMouseEnter"> <div ref="textContainer" class="overflow-hidden hidden-text wspw" :style="{ '-webkit-line-clamp': clampLines }"> {{ text }} </div> <div ref="hiddenText" class="hidden-text wspw">{{ text }}</div> <el-tooltip ref="tooltip" :content="text" placement="top" :disabled="!showTooltip" effect="light"> <template #content> <span class="wspw">{{ text }}</span> </template> <div class="overflow-hidden" :style="{ '-webkit-line-clamp': clampLines }"> {{ text }} </div> </el-tooltip> </div> </template> <script> export default { name: 'TextOverFlow', props: { text: { type: String, default: '' }, clampLines: { // 控制溢出隐藏的行数 type: Number, default: 1 } }, data() { return { showTooltip: false // 控制是否显示tooltip } }, mounted() { this.updateTooltipVisibility() }, methods: { handleMouseEnter() { this.updateTooltipVisibility() }, updateTooltipVisibility() { const textContainerHeight = this.$refs.textContainer.clientHeight const hiddenTextHeight = this.$refs.hiddenText.clientHeight this.showTooltip = hiddenTextHeight > textContainerHeight } } } </script> <style scoped lang="scss"> .overflow-hidden { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .hidden-text { position: absolute; width: 100%; /* 使用与目标元素相同的宽度 */ visibility: hidden; } .wspw { white-space: pre-wrap; /* 保留换行符 */ } </style>