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