element-ui+vue-cli3.0系列问题三：el-tooltip实现多行，单行文本溢出省略号处理

大家都知道，对于文本溢出处理，单行溢出处理直接用css就可以处理，但是对于多行文本溢出的话，也可以用css处理，但是由于浏览器的兼容性，所以只能通过js结合css来处理。
点击查看源码。

单行文本溢出css核心样式

. ellipsis{
    width: 500px; 
    overflow: hidden;
    text-overflow: ellipsis; //文本溢出显示省略号
    white-space: nowrap; //文本不会换行
}

多行文本溢出css核心样式，此方法只适用于webkit的内核浏览器

.multiple{
     overflow: hidden;
    text-overflow:ellipsis; //文本溢出显示省略号
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width:500px;
}

下面通过vue+element-ui实现文本溢出的显示

单行文本溢出hover显示更多

single.png

多行文本溢出hover显示更多

multiple.png

element-ui+vue-cli3.0系列问题一：el-upload上传组件
element-ui+vue-cli3.0系列问题二：表格合并
element-ui+vue-cli3.0系列问题三：el-tooltip实现文本溢出省略号处理