CSS实现单行，多行文本超出显示省略号（...）及多行文本编译后样式丢失

单行文本显示省略号

实现：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

效果：

多行文本显示省略号

实现：

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical；
-webkit-line-clamp: 3;

效果：

注意：

在使用webpack或gulp压缩css时，如使用autoprefixer打包时，会将 -webkit-box-orient: vertical;  除去，导致多行文本溢出省略号无效。网上的解决办法是在样式前后添加注释，修改的代码如下：

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
/*! autoprefixer: off */
  -webkit-box-orient: vertical;
/* autoprefixer: on */

发现效果实现了，但是编译后，会出现一条警告： “Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.“

对我这个强迫症实在不能接受，查了资料后，再做修改，终于可以。

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;