css 超出兩行省略號,超出一行省略號

參考：https://www.cnblogs.com/yangguojin/p/10301981.html

 

超出一行省略：

p{

　　white-space:nowrap;

　　overflow:hidden;

　　text-overflow:ellipsis; 

}

超出2行省略：

p {

　　overflow:hidden; 

　　text-overflow:ellipsis; 

　　display: -webkit-box;

　　-webkit-box-align: start; //讓內容居左

　　 /*! autoprefixer: off */

　　-webkit-box-orient:vertical; 

　　/* autoprefixer: on */ 
　　-webkit-line-clamp:2; 

}

注：兩行注釋必須要！因為 webpack打包后-webkit-box-orient會被移除，autoprefixer會自動移除老式過時的代碼，所以需要添加注釋關閉autoprefixer。如果有清除注釋的插件,將該插件設為false,否則不生效。

但當css樣式為外部引入時，這樣寫會報警告：Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
需修改為：

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