阅读 1771

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



文章分类
前端
文章标签