| 導購 | 订阅 | 在线投稿
分享
 
 
 

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

來源:互聯網  2008-08-15 05:14:31  評論

常見的側欄最新評論列表一般有兩種格式:路人甲 發表于 某某文章,或者 路人乙:引言…… 它們都有個問題,就是換行很難控制,長短不一,有時候內容還會把頁面撐破。老肥研究了很久 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; 是個非標准屬性。

常見的側欄最新評論列表一般有兩種格式:路人甲 發表于 某某文章,或者 路人乙:引言…… 它們都有個問題,就是換行很難控制,長短不一,有時候內容還會把頁面撐破。老肥研究了很久 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; 是個非標准屬性。
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有