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

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

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


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

text-overflow

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

例:

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

參考資料:

https://developer.mozilla.org/zh-TW/docs/Web/CSS/text-overflow

Leave a Reply