关于前端:webkitboxorientvertical-编译报错之autoprefixer问题

因为各大浏览器的兼容问题，autoprefixer 插件 就能够帮咱们主动补齐前缀。它和 less、scss 这样的预处理器不同，它属于 后置处理器。

• 预处理器：在打包之前进行解决
• 后置处理器：在代码打包生成后再进行解决

autoprefixer 其实是 postCss 的一个插件，postCss 自身是一个用 JavaScript 工具和插件转换 CSS 代码的工具，它提供了许多弱小的解决 CSS 的性能。

autoprefixer插件广泛应用于前端我的项目的打包配置中，具体配置请参考官网文档。

Autoprefixer css 补全前缀性能

Autoprefixer解决前 css 代码

display: flex;

Autoprefixer解决后 css 代码

display: -webkit-box;
display: -ms-flexbox;
display: flex;

点击这里，在线测试 css 款式在不同浏览器的主动补全成果！

CSS- 文本超出显示省略号

布局款式中，常常会遇到超出显示省略号的需要，有的显示一行，有的显示两行、三行，通常采纳如下款式：

1. 单行文本省略

   // 文本溢出省略号
   .ellipsis {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }

2. 多行文本省略

这里应用的是 less 混合传参的形式

.clamp_fun(@line: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  /* autoprefixer: off*/
  -webkit-box-orient: vertical;
  /* autoprefixer: on*/
  display: -webkit-box;
  -webkit-line-clamp: @line;
}
.clamp_1 {.clamp_fun(1);
}
.clamp_2 {.clamp_fun(2);
}
.clamp_3 {.clamp_fun(3);
}

• display: -webkit-box; 将对象作为弹性伸缩盒子模型显示。
• -webkit-line-clamp: 2; 这个属性不是 css 的标准属性，须要组合下面两个属性，示意显示的行数。
• -webkit-box-orient: vertical; 从上到下垂直排列子元素（设置伸缩盒子的子元素排列形式）

编译报错问题解决

下面通过正文 autoprefixer off on，编译中报错，错误信息如下：

(43:3)Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.

这种写法曾经过期了，采纳上面的写法：

/* autoprefixer: ignore next */

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

我是 甜点 cc☭

微信公众号：【看见另一种可能】

酷爱前端开发，也喜爱专研各种跟本职工作关系不大的技术，技术、产品趣味宽泛且浓重。本号次要致力于分享集体经验总结，心愿能够给一小部分人一些渺小帮忙。