二次开发element el-tooltip+span 超出文本部分显示省略号鼠标悬浮显示全部内容

二次开发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;//这个行高看自定义样式文本高度
    }
 }

页面调用