html部分

?

  

    
      
1111這是測試的文本內容，沒有實際意義。
    

    
      
2222這是測試的文本內容，沒有實際意義。
    
  

css部分 第一個是超出出現 ... 第二個是不超出的

注意：超出出現... 需要用這種寫法

.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) {
    // 實際高度 小于 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
        // 鼠標移入之后延遲10ms把顯示出來的tooltip的dom 給隱藏起來，tooltip的節點id為當前dom的aria-describedby值  通過這個關系查找的指定的框
        setTimeout(res=>{
          if(!document.getElementById(ariaDescribedby)){ return }
          document.getElementById(ariaDescribedby).style.display = 'none'
        },openDelay + 10)
        
      }) 
    }
  },
  
})

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

有錯誤歡迎指正！