最近在做 vue 项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical 这个属性,开发环境跑起来没问题,但是打包运行后发现这个属性丢失了。

开发环境:

1
2
3
4
5
6
7
.ellipsis {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

打包后查看样式:

ellipsis
ellipsis

网上查了一下,发现是autoprefixer这个插件的问题,-webkit-box-orient不是标准的CSS样式,被这个插件过滤掉了。

解决办法有以下两种:

1.加上特殊的注释

1
2
3
4
5
6
7
8
9
.ellipis {
display: -webkit-box;
-webkit-line-clamp: 4;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;
text-overflow: ellipsis;
}

2.添加行内样式:

inline-style
inline-style