[CSS] 如何避免文字過長影響排版：text-overflow & line-clamp
當要顯示的文字過長時，一般會使用 CSS 隱藏超出的部分，並在文字尾端顯示 ... 來表示內容並未完全顯示。
Demo：https://codepen.io/lwxidmpx-the-scripter/pen/MYgVmjm
單行文字截斷
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
多行文字截斷
overflow: hidden;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
許多人會把這兩組 CSS 當成固定用法直接記下來，但如果能了解每個語法的用途，就能應用在更多不同情境。
單行文字截斷
overflow: hidden;：隱藏超出元素範圍的內容
除了 hidden 屬性，用 scroll 控制 scrollbar 也是常見的使用情境。並可以用 overflow-x & overflow-y 分別控制 水平與垂直的 scrollbar。
white-space: nowrap;：避免文字自動換行
當要顯示的內容為程式碼，希望縮排、換行都能完整呈現時，可以使用 white-space: pre;。
<style>
.code {
white-space: pre;
}
</style>
<div class="code">
function example() {
console.log("保留縮排和換行");
}
</div>
text-overflow: ellipsis;：當文字超出範圍時顯示 ...
因此，實現單行文字截斷才需要將三個屬性一起使用。
- 避免文字自動換行。
- 隱藏超出元素範圍的內容。
- 當文字超出範圍時顯示
...
如果還是不清楚，可以在 codepen 中試著移除任一屬性，看看有什麼差別。
多行文字截斷
-webkit-line-clamp: 2;：設定行數，並在文字超出範圍時顯示 ...
此屬性已經包含所有設定，理論上，只需加上 overflow: hidden; 將超出的行數隱藏即可。
然而，實際使用需要搭配 display: -webkit-box; 與 -webkit-box-orient: vertical;。
要解釋其原因，先來說明這個奇怪的前綴 -webkit。
CSS 瀏覽器前綴
古時候，各瀏覽器廠商會率先實現一些尚未完全標準化的 CSS 特性。為了避免這些實驗性功能造成影響，瀏覽器廠商引入了 CSS 前綴，用於標記哪些屬性是特定瀏覽器的實現。
-webkit- /* 用於基於 WebKit 的瀏覽器，如 Safari 和 Chrome */
-moz- /* 用於 Firefox */
-ms- /* 用於舊版的 IE 和 Edge */
-o- /* 用於舊版的 Opera */
現在，大部分主流 CSS 特性都已標準化，需要使用前綴的情境已經相當少。
-webkit-line-clamp 是由 WebKit 引入的實驗性功能。由於其實用性高，其他瀏覽器也沿用該語法以保持兼容性。因此，現代開發仍持續使用帶有 -webkit- 前綴的語法來實現多行截斷。且 -webkit-line-clamp 必須要搭配 display: -webkit-box; 與 -webkit-box-orient: vertical;使用。
It only works in combination with the display property set to -webkit-box or -webkit-inline-box and the -webkit-box-orient property set to vertical.
* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
而 display: -webkit-box; 與 -webkit-box-orient: vertical; 是早期 WebKit Flexbox 的語法，除了搭配 -webkit-line-clamp 使用外，其他的使用情境均已被 display: flex; 取代。
延伸閱讀
在某些複雜的排版中，可能無法光靠 CSS 來實現文字截斷。此時，可以參考這篇文章中介紹的其他解決方案。
