CSS 多行省略失效 (-webkit-box-orient 失效)

背景

scss文件中，設置多行省略（以下），代碼未生效

overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;複製代碼

現象

• 代碼未生效：

• 查看style,-webkit-box-orient 編譯以後消失

緣由

postcss-loader 默認編譯的時候，會過濾 -webkit-box-orient: vertical;

解決方案

方案一：對scss文件沒有特殊要求，能夠換成.less等其餘格式文件

方案二: autoprefixer（推薦使用）

//單個屬性
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;

/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */複製代碼

緣由：

1.autoprefixer會幫你刪除老式過期的代碼
2. autoprefixer也會幫你增長新前綴

方案二優化：在webpack中配置postcss的autoprefixer：www.webpackjs.com/loaders/pos…

參考：

github.com/postcss/aut…

PostCSS 配置指北

webpack4之使用postcss-loader和autoprefixer瀏覽器兼容