vue專案打包後多行省略樣式混亂

melongz發表於2018-07-06
Vue

在實現多行省略時，可以用以下方式來實現：

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
複製程式碼

vue專案中採用這種寫法後，在本地並沒有問題。但是在打包之後發現樣式混亂，沒有正常顯示省略號。從chrome的偵錯程式中發現是 -webkit-box-orient: vertical 缺失，從而導致的。

解決辦法是通過在 -webkit-box-orient: vertical前後加入特定註釋：

  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @num;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
複製程式碼

這樣多行省略就能正常顯示了。

相關文章