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

@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