@TOC
楼主镇楼图
开发过程中，难免会遇到超出几行省略的问题，尤其是在列表里的某些标题需要如此，以下是纯css的解决方案，并且会遇到的问题，暂时已经有方案解决
- 单行
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
