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浏览器兼容