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 常用案例