css结合element超出文字显示三个点

当文字过长时，我们通常通过三个点来省略掉后面的内容。

文本超出显示三个点一般分两种情况
一,单行文本超出隐藏

  overflow:hidden;
　text-overflow:ellipsis;
　white-space:nowrap;

二,多行文本超出隐藏
超过设置的宽后显示三个点。

　word-break: break-all;
  overflow:hidden; 
  text-overflow:ellipsis; 
  display:-webkit-box;
  -webkit-box-orient:vertical;  
  -webkit-line-clamp:3; /* 超出几行省略 */

三.那我既想超出文本后隐藏，又想看到完整的文本内容呢？
答案：通过上面的超出隐藏代码和element中Tooltip功能的结合使用即可，代码如下：

//鼠标移动到el-tooltip即可显示完整的文本。
 <el-tooltip class="item" effect="dark" :content="MSG" placement="top" >
   <a  class="msg" > {{MSG}}</a> 
 </el-tooltip>