多行文本 超出省略 - 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 */，相關測試以下：