实现功能:
当文字过长时,只显示两行文字,并在末尾出现…,并当鼠标移入文字区域时显示全部文字内容。
实现方法:
-
css部分:
// 超出两行隐藏,并在末尾出现... .overlap { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
-
html:
<el-tooltip :content="address" placement="top" :disabled="!address || !(isTooltip == 'address')"> <p class="value overlap" @mouseenter="tooltipShow($event, 'address')" @mouseleave="hideTooltip" >{{ address || "--" }}</p> </el-tooltip>
-
js部分(使用vue+elementui-tooltip组件):
// 文本高度与dom高度比较 export function textRange(el) { const textContent = el const targetH = textContent.getBoundingClientRect().height // dom高度 let range = document.createRange() range.setStart(textContent, 0) range.setEnd(textContent, textContent.childNodes.length) const rangeH = range.getBoundingClientRect().height // 文本高度 range.detach() // 从文档中分离 range = null // 解除引用 return rangeH > targetH }
// 当文本高度大于dom高度时,需要悬浮显示,将表示设为当前鼠标移入的字段名 tooltipShow(event, value) { textRange(event.target) && (this.isTooltip = value) }, // 鼠标移出,悬浮消失 hideTooltip() { this.isTooltip = '' },