[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

Continue reading