首先

• 要知道當(dāng)前元素的寬
• 將文字放到一個容器中赚爵，將容器的樣式（主要是有關(guān)字體的樣式）都設(shè)置為當(dāng)前元素的樣式，然后獲取容器的寬廊宪，也就是文字的寬
• 如果文字的寬度超過了當(dāng)前元素的寬度摹闽，則給溢出隱藏的css樣式 overflow :hidden;text-overflow: ellipsis;white-space: normal
• 定義鼠標(biāo)移入展示浮層颜曾，浮層中顯示全部內(nèi)容，鼠標(biāo)移出銷毀浮層

代碼

• mian.js 中定義全局指令
• 也可以在組件的directives中注冊局部指令

Vue.directive('showTips', {
  // el {element} 當(dāng)前元素
  componentUpdated (el) {
    const curStyle = window.getComputedStyle(el, '') // 獲取當(dāng)前元素的style
    const textSpan = document.createElement('span') // 創(chuàng)建一個容器來記錄文字的width
    // 設(shè)置新容器的字體樣式，確保與當(dāng)前需要隱藏的樣式相同
    textSpan.style.fontSize = curStyle.fontSize
    textSpan.style.fontWeight = curStyle.fontWeight
    textSpan.style.fontFamily = curStyle.fontFamily
    // 將容器插入body蜀铲，如果不插入边琉，offsetWidth為0
    document.body.appendChild(textSpan)
    // 設(shè)置新容器的文字
    textSpan.innerHTML = el.innerText
    // 如果字體元素大于當(dāng)前元素，則需要隱藏
    if (textSpan.offsetWidth > el.offsetWidth) {
      // 給當(dāng)前元素設(shè)置超出隱藏
      el.style.overflow = 'hidden'
      el.style.textOverflow = 'ellipsis'
      el.style.whiteSpace = 'nowrap'
      // 鼠標(biāo)移入
      el.onmouseenter = function (e) {
        // 創(chuàng)建浮層元素并設(shè)置樣式
        const vcTooltipDom = document.createElement('div')
        vcTooltipDom.style.cssText = `
          max-width:400px;
          max-height: 400px;
          overflow: auto;
          position:absolute;
          top:${e.clientY + 5}px;
          left:${e.clientX}px;
          background: rgba(0, 0 , 0, .6);
          color:#fff;
          border-radius:5px;
          padding:10px;
          display:inline-block;
          font-size:12px;
          z-index:19999
        `
        // 設(shè)置id方便尋找
        vcTooltipDom.setAttribute('id', 'vc-tooltip')
        // 將浮層插入到body中
        document.body.appendChild(vcTooltipDom)
        // 浮層中的文字
        document.getElementById('vc-tooltip').innerHTML = el.innerText
      }
      // 鼠標(biāo)移出
      el.onmouseleave = function () {
        // 找到浮層元素并移出
        const vcTooltipDom = document.getElementById('vc-tooltip')
        vcTooltipDom && document.body.removeChild(vcTooltipDom)
      }
    }
    // 記得移除剛剛創(chuàng)建的記錄文字的容器
    document.body.removeChild(textSpan)
  },
  // 指令與元素解綁時
  unbind () {
    // 找到浮層元素并移除
    const vcTooltipDom = document.getElementById('vc-tooltip')
    vcTooltipDom && document.body.removeChild(vcTooltipDom)
  }
})

• 使用 : 需要溢出隱藏的直接加上指令 v-show-tips 即可

<div v-show-tips class="title-text">{{ name }}</div>