文字过长，限制两行显示文字，末尾加...，鼠标在文字上放显示全部文字

实现功能：

当文字过长时，只显示两行文字，并在末尾出现…，并当鼠标移入文字区域时显示全部文字内容。

实现方法：

• 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 = ''
  },