css 单行、多行溢出用省略号

发表于 | 更新于:

单行

1
2
3
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行

1
2
3
4
5
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

多行不生效

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

打包时，警告

1
Emitted value instead of an instance of Error) autoprefixer: \static\css\reset\index.css:99:3: Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.

解决办法

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