[CSS3:text-overflow]將過多的內文自動刪減為適合的長度

在設計或撰寫網頁內容時,
有時候我們不希望某個區塊內的文字太長,導致整個版面顯得雜亂擁擠。
例如在頁面側邊欄,我們經常會顯示『最新留言』、『最新文章』等等,
如果這些文章標題的字數過多,
礙於側邊欄的寬度,
每一則顯示的文章標題就會自動換行,
把整個側邊欄也擠的很長。
感覺就會很雜亂。

在之前,如果要處理這種情形,
我們通常會使用Javascript來計算側邊欄的寬度,並換算出適當的字數,然後用JS去刪減多餘的字數,並在字串尾端加上『...』符號,表示後面還有更多的字串。
但這種作法技術層面較高,並且效能也會受影響,
現在我們可以直接使用CSS的語法:text-overflow,就能完成一樣的功能。

語法的實行如下(如果要縮減的區塊名為:test):

div.test{
white-space:nowrap; 
width:100%; //你可以指定希望的寬度
overflow:hidden;
text-overflow:ellipsis;
}

實作預覽:

沒有設定前:
這個區塊要顯示的文字實在太多了,我真希望能自動縮減,並且最後放一個省略符號呀!
設定後的側邊欄:
這個區塊要顯示的文字實在太多了,我真希望能自動縮減,並且最後放一個省略符號呀!

Readers comment