什麼是省略號?
省略號就是「……」,又稱刪節號,中文省略號原本為「…」,後來因為避免與直排文字中的冒號混淆,因此改成「……」。在網頁排版中,常使用於文章列表中的標題與摘要段落,為了讓版面整齊,我們會使用省略號讓文字限制於特定行數使其高度一致。
許久以前,要處理省略號時,可能會使用以下方式
- 後端程式語言(e.g. PHP)計算字數後加上省略號
- 前端程式語言(e.g. Javascript)計算字號後加上省略號
- 使用 HTML + CSS 產生一個內含省略號的小區塊放至在行尾
然而,隨著 CSS 技術的進展與瀏覽器對這些新技術支援度的提升,如今我們可以用幾行 CSS 設定就完成單行文字與多行文字的省略號功能,現在就來為大家介紹一下。
單行文字省略號
單行文字省略號的技術相信大家已不陌生,首先我們先使用 white-space: nowrap; 強制讓文字不換行,再來使用 overflow: hidden; 隱藏此行文字超出容器的部分,最後使用 text-overflow: ellipsis; 來為溢出的文字加上省略號即可。以下寫法舊版 IE 都支援,程式碼範例如下: