多行文本显示省略、解决vue build 打包不生效问题

多行文本显示隐藏 

<style>
.text {
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient:vertical;
}
</style>

遇到的问题：

-webkit-box-orient:vertical 在使用 webpack 打包的时候这段代码会被删除掉，原因是optimize-css-assets-webpack-plugin 这个插件的问题。

解决办法：

加上下面这段，打包的时候会把这段代码和注释一起打包进去。

  /*! autoprefixer: off */
  -webkit-box-orient:vertical;
  /* autoprefixer: on */

附带less、scss方法调用

<style lang="less">
/**
  文字超出省略
  @clamp 显示行数
  调用： line-clamp(2);
*/
.line-clamp (@clamp) {
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: @clamp;
  display: -webkit-box;
  /*! autoprefixer: off */
  -webkit-box-orient:vertic