两句CSS完美截断侧栏最新评论列表

来源:岁月联盟 编辑:zhu 时间:2008-08-13
两句CSS完美截断侧栏最新评论列表内容简介:常见的侧栏最新评论列表一般有两种格式:路人甲 发表于 某某文章,或者 路人乙:引言 它们都有个问题,就是换行很难控制,长短不一,有时候内容还会把页面撑破。老肥研究了很久 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 图1 截断侧栏后的效果

    这里里是给每个限定高度,溢出部分截断。em 是一个相对的单位,调试一下选一个合适的数值,一行两行都可以实现,像下图。或者用 max-height 代替 height, 兼容性待考。需要最后跟个省略号的话可以试试 text-overflow: ellipsis; 是个非标准属性。

图片内容