CSS -webkit-box-orient: vertical 编译报错之autoprefixer问题

发表于 2022-10-22 更新于 2023-10-27 分类于 CSS 阅读次数： Changyan：本文字数： 1.2k 阅读时长 ≈ 1 分钟

autoprefixer 插件问题

由于各大浏览器的兼容问题，autoprefixer 插件就可以帮我们自动补齐前缀。它和 less、scss 这样的预处理器不同，它属于后置处理器。所谓预处理器是指在打包之前进行处理，所谓后置处理器是在代码打包生成后再进行处理。

autoprefixer 其实是 postCss 的一个插件，postCss 本身是一个用 JavaScript 工具和插件转换 CSS 代码的工具，它提供了许多强大的处理 CSS 的功能

Autoprefixer css补全前缀功能

Autoprefixer处理前css代码

1	display: flex;

Autoprefixer处理后css代码

1
2
3

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

文本超出显示省略号

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

单行

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

多行

这里使用的是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; 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）