【前端芝士樹】純CSS實現多行文本溢出顯示省略號
使用-webkit-line-clamp來控制行數
由於-webkit-line-clamp 用來限制在一個塊元素顯示的文本的行數,這是一個不規範的屬性（unsupported WebKit property），它沒有出現在 CSS 規範草案中，爲了實現該效果，它需要組合其他外來的 WebKit 屬性。
overflow: hidden;
text-overflow: ellipsis; //文本溢出時，用省略號“…”隱藏超出範圍的文本。
display: -webkit-box; //將對象作爲彈性伸縮盒子模型顯示
-webkit-box-orient: vertical; //設置或檢索伸縮盒對象的子元素的排列方式
-webkit-line-clamp: 2; //控制文本的行數該段樣式在 vue 或者 angular 項目中會失效，因爲代碼構建過程中使用了 autoprefixer
-webkit-box-orient是過時的 flexbox 語法，現在它已經轉化爲了flex-direction。
人們對 Autoprefixer 感到惱火的原因是因爲 Autoprefixer 破壞了 line-clamp 的使用， 並且這個問題已經存在了很長一段時間。
但是，使用舊的過時的 flexbox 語法是 line-clamp 在任何-webkit-瀏覽器中處理多行溢出的唯一純 CSS 方法。
Autoprefixer 作者的意見如下
是的，我知道 line-claimp 這個屬性。我個人不喜歡 webkite-only 的事情。所以我不想花費我的時間而允許人們去做這個事情（但是可以通過/* autoprefixer: ignore next */或者/* autoprefixer: off */讓autoprefixer去忽略這個屬性的檢查）。
但如果有人解決 webkit-only 的問題，我會去 fix 這個屬性的檢查。
所以最後的開發代碼如下：
/* autoprefixer: off */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;參考文獻
《多行文本溢出顯示省略號(…)全攻略-WEB前端開發》
《Ask not to remove the code: -webkit-box-orient · Issue #1141 · postcss/autoprefixer》