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;