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

@TOC

• 单行

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

• 两行或多行

  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的删除前缀功能；

更多关于的配置请转autoprefixer

作者博客:Eno