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

雲中的貓發表於2018-12-10
前端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》

相關文章