在網頁的許多地方可能會出現較長的段落,當文字過長時可能會影響排版及 UI。
我們可以利用 css 的 text-overflow 去做一個客製化的隱藏多餘文字。
這個屬性要記得搭配 overflow: hidden; (oveflow時隱藏)與 white-space: nowrap;(瀏覽器不換行)
text-overflow
clip 預設值,直接將字切斷 ellipsis 將過長的地方取代為 …
例:
上面例子 標籤多了 display:inline-block;,是因為 是行內(inline)元素,並不能設定寬度,因此必須改為 display: inline-block;。
參考資料:
https://developer.mozilla.org/zh-TW/docs/Web/CSS/text-overflow