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自動移除老式過時的代碼，是以先關閉再開啟。

詳情請戳這裡哦