CSS多余文本省略号显示

CSS多余文本省略号显示

本次案例代码是在 elementui 当中的 table 组件中实际需求

当然使用的是纯 CSS3 代码，所以原生支持度高，兼容性高，所以可多场景应用

对于过长文本进行单行省略显示，当鼠标移动到对应文本行时，展示全部，当鼠标离开后又恢复单行，多余内容收缩出现省略号;

对应文本应当转换为块元素或者使用 inline-block ;

/deep/.el-table__row {
.cell {
//对超出内容隐藏
overflow: hidden;
//显示省略符号来代表被修剪的文本
text-overflow: ellipsis;
//文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
white-space: nowrap;
}
.cell:hover{ overflow: auto; text-overflow:clip; white-space:normal;
}
}


以上为一 CSS3 常用案例