css实现超出几行省略并...

原文链接：https://juejin.im/post/5d7f2ea1f265da03ea5aaea0

1、单行

word-break: break-all; 
overflow:hidden; // 超出的文本隐藏 
text-overflow:ellipsis; // 溢出用省略号显示 
white-space:nowrap; // 溢出不换行

2、多行

word-break: break-all;
overflow:hidden; // 超出的文本隐藏
text-overflow:ellipsis; 
display:-webkit-box; // 将对象作为弹性伸缩盒子模型显示。
 -webkit-box-orient:vertical;  //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; // 结合上面两个属性，表示显示的行数。

如果用上了autoprefixer的话，由于它自动补全css前缀，或者删除过时的前缀，导致-webkit-box-orient:vertical; 失效；这时候需要改成如下；

word-break: break-all;
overflow:hidden; // 超出的文本隐藏
text-overflow:ellipsis; 
display:-webkit-box; // 将对象作为弹性伸缩盒子模型显示。
 /* autoprefixer: off */
 -webkit-box-orient:vertical;  //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
/* autoprefixer: on */ 
-webkit-line-clamp:2; // 结合上面两个属性，表示显示的行数。

如果用上了autoprefixer的话，也可以在使用autoprefixer的时候进行配置如下:

// webpack.config.js

postcss([ autoprefixer({ remove: false }) ]); // 关闭autoprefixer的删除前缀功能；

 

标签：box,...,伸缩,autoprefixer,几行,break,webkit,overflow,css
来源： https://blog.csdn.net/JH0610Y/article/details/100896033