【前端芝士樹】純CSS實現多行文本溢出顯示省略號

【前端芝士樹】純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》