CSS ellipses show the extra text

CSS ellipses show the extra text

The actual needs in case the code is among the table assembly elementui

Of course, the use of pure CSS3 code, native support high, high compatibility, it is possible to use multi-scene

For too long for a single line text display is omitted, when the mouse is moved to the corresponding lines of text, all the display, and then restored when the mouse leaves the single line, the content of excess shrinkage occurs ellipsis

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

      overflow: auto;

      text-overflow:clip;

      white-space:normal;
     }
}

The above is a commonly used CSS3 Case