多行文本 超出省略 - 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 */,相关测试如下:

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