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;