css文本超出隐藏显示省略号 以及多行文本省略号失效的问题

单行文本：

.box{
    width:300px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

多行文本：

.box{
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*3表示只显示3行*/
  -webkit-box-orient: vertical;
}

 

多行文本省略号失效解决：添加两行代码即可

.box{
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*3表示只显示3行*/
  /* autoprefixer: off */ 
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

因为autoprefixer自动移除老式过时的代码，所以先关闭再开启。

详情请戳这里哦