html部分

?

  

    
      
1111這是測(cè)試的文本內(nèi)容，沒有實(shí)際意義。
    

    
      
2222這是測(cè)試的文本內(nèi)容，沒有實(shí)際意義。
    
  

css部分 第一個(gè)是超出出現(xiàn) ... 第二個(gè)是不超出的

注意：超出出現(xiàn)... 需要用這種寫法

.text{
  display: inline-block;
  width: 100px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:1;
}
.text2{
  width: 500px;
}

自定義指令

Vue.directive('showByContent', {
  
  inserted(el, binding) {
    // 實(shí)際高度 小于 1.5倍顯示高度 （1.5倍為邊界值的兼容）
    if(el.scrollHeight < el.offsetHeight * 1.5){
      // 隱藏  tooltip
      let openDelay = el.__vue__ && el.__vue__.openDelay || 10
      el.addEventListener('mouseenter', () => {
        let ariaDescribedby = el.attributes['aria-describedby'].value
        // 鼠標(biāo)移入之后延遲10ms把顯示出來的tooltip的dom 給隱藏起來，tooltip的節(jié)點(diǎn)id為當(dāng)前dom的aria-describedby值  通過這個(gè)關(guān)系查找的指定的框
        setTimeout(res=>{
          if(!document.getElementById(ariaDescribedby)){ return }
          document.getElementById(ariaDescribedby).style.display = 'none'
        },openDelay + 10)
        
      }) 
    }
  },
  
})

有其他更好的方法，歡迎分享。

有錯(cuò)誤歡迎指正！