多行文字超出部分显示省略号，以及打包后失效问题【20190227更新】

单行超出隐藏

处理单行文字超出显示省略号的问题很常见

div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

浏览器原生支持，但是只能在单行中实现。

多行超出隐藏

使用-webkit-line-clamp实现。

div {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}

-webkit-line-clamp需要配合overflow、text-overflow、display和-webkit-box-orient实现

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient;必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。webpack打包时，此属性会被删掉，导致功能失效，所以上述代码中做了特别处理

更新打包配置，保证样式打包后正常使用

上述注释，会在命令行内抛出警告，而且有时并不生效。现在我们要删除这两行注释/*! autoprefixer: off */,/*! autoprefixer: on */

optimize-css-assets-webpack-plugin 从这个插件的问题源头解决

通过autoprefixer: { remove: false } }配置关闭自动移除功能。

new OptimizeCSSAssetsPlugin({
cssProcessorOptions: { safe: true, autoprefixer: { remove: false } },
})