多行文本 超出省略 - less实现

多行文本不难，其中会遇到一个坑点，-webkit-box-orient: vertical; 这个属性在 webpack 编译时，会被 autoprefixer 干掉，从而导致样式失效，解决方案如下：

/**
 * 多行省略（容器可以不设置高度）
 *  webpack编译时，autoprefixer会将-webkit-box-orient属性省略，必须采用黑科技克服
 *
 * @lineNum 行数
 */
.text-lines(@lineNum) {
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lineNum;
  overflow: hidden;
  text-overflow: ellipsis;
}

如果 autoprefixer 版本较低，会不生效，升级一下即可。

而旧版本，可以使用 /* autoprefixer: off */，相关测试如下：