兩句CSS完美截斷側欄最新評論列表

常見的側欄最新評論列表一般有兩種格式：路人甲 發表於 某某文章，或者 路人乙：引言…… 它們都有個問題，就是換行很難控制，長短不一，有時候內容還會把頁面撐破。老肥研究了很久 CSS 手冊，找到了一個符合標準的辦法，像現在我的側欄 widget 一樣，強制只顯示一行，多出來的一刀切斷，是不是有點像 Gmail 裡面的預覽文字？方法很簡單，比如我的側欄 widget 是 ＜DIV class="widget"＞, 要對它下面的 ＜LI＞進行截斷，那麼用下面的 CSS 來強制不換行，溢出部分隱藏：

.widget li {
white-space: nowrap;
overflow: hidden;
}

視其父容器屬性的不同，在 IE 下可能無法截斷，那麼在上面兩句後再跟一個 width 定義就可以了。如果不喜歡一個字被切成兩半，或者想多顯示一行引言，可以這樣做：

.widget li {
height: 3.6em;
overflow: hidden;
}

這裡是給每個 ＜li＞ 限定高度，溢出部分截斷。em 是一個相對的單位，調試一下選一個合適的數值，一行兩行都可以實現，像下圖1。或者用 max-height 代替 height, 相容性待考。需要最後跟個省略符號的話可以試試 text-overflow: ellipsis; 是個非標準屬性，我沒有試過，不知道好不好用。

圖1 截斷側欄後的效果

這裡裡是給每個限定高度，溢出部分截斷。em 是一個相對的單位，調試一下選一個合適的數值，一行兩行都可以實現，像下圖。或者用 max-height 代替 height, 相容性待考。需要最後跟個省略符號的話可以試試 text-overflow: ellipsis; 是個非標準屬性。