二次開發element組件 el-tooltip+span 超出文本部分顯示省略號鼠標懸浮顯示全部內容

EllipsisTooltip.vue（我是放置在了src/components）

css

//el-tooltip二次封裝
.tooltip-wrap {
    height: 16px; // 必須要有高度設置，因為tooltip的顯示條件是通過高度來判斷的
    display: inline-block;
    display: -webkit-box;
    -webkit-line-clamp: 1; // 因為通過高度所以只顯示一行，溢出顯示省略號
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;//英文數字折行
    span{
        line-height: 1.3;//這個行高看自定義樣式文本高度
    }
 }

頁面調用