css文本超出三个点显示

有的时候我们会遇到文本超出我们想隐藏，三个点这种，那么怎么实现呢，下面编程爱好者之家为大家带来解决这种问题的三种方法

一：单行文本超出隐藏

  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>