前端页面CSS超出部分省略号

发表于 | 更新于 | 评论数： | 阅读次数：

在平时的开发过程中，经常会遇到一些文字超出部分需要显示省略号的情况，今天稍微整理并记录一下，方便日后查找。

CSS超出部分省略号

单行显示省略号

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

多行显示省略号

1
2
3
4
5
6
display: -webkit-box;
/* autoprefixer: off */ 
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 3; // 文字的行数
overflow: hidden;

可能会遇到如下问题：

1
Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.

解决：

1
2
3
4
5
6
7
8
// 把
/* autoprefixer: off */ 
-webkit-box-orient: vertical;
/* autoprefixer: on */

// 替换成
/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;

0%