[css] 讓過長的內容省略為....，text-overflow的用法與說明

在網頁的許多地方可能會出現較長的段落，當文字過長時可能會影響排版及 UI。

我們可以利用 css 的 text-overflow 去做一個客製化的隱藏多餘文字。

這個屬性要記得搭配 overflow: hidden; (oveflow時隱藏)與 white-space: nowrap;(瀏覽器不換行)

text-overflow

clip 預設值，直接將字切斷 ellipsis 將過長的地方取代為 …

例：

上面例子標籤多了 display:inline-block;，是因為是行內(inline)元素，並不能設定寬度，因此必須改為 display: inline-block;。

參考資料：