两句 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 是一个相对的单位,调试一下选一个合适的数值,一行两行都可以实现,像下图。或者用 max-height 代替 height, 兼容性待考。需要最后跟个省略号的话可以试试 text-overflow: ellipsis; 是个非标准属性,我没有试过,不知道好不好用 :)

最新评论

  • 高午饭 博主现在的社交网络有么,想关注您呢 我为什么爱 Twitter
  • 西贝博客 很好的建议!谢谢分享! 如何为 blog 建立一个高效的标签系统
  • 苹果 老罗露脸了,哈哈,支持他现在的事业 我为什么爱 Twitter
  • 飞之梦 不错,第一次看到这些效果,以后要用一用了。 CSS 文字阴影在网页设计中的应用
  • QQ地带 大牛,pansou也是用的ajax search,为什么他不会被墙呢,因为他调用的地址是ip,不是直接的谷歌域名。请问怎么实现。 打造完美的 ajax 版 Google 自定义搜索

发表您的评论

您的评论将回复给 原评论者

:D:):O8):(8D;DXD:P:nice::rainbow::cafe::love::cake:

目前有 19 条评论

  

竟然还没评论

CSS达人,赞一个

这个方法不错,我也去试试。
不过还是发现你这里有字被切两半了


fisio 回复: 我个人更喜欢这种截断,嘿嘿

不喜欢输出评论列表

因为Spam太多了


fisio 回复: 你。。。不会没启用反垃圾插件吧?我这里日均拦截50条 👿

text-overflow: ellipsis似乎是CSS3的,现在好多只支持到CSS2
这种方法便捷,简单
不过不彻底,只是隐藏
权衡一下利弊再用:)


fisio 回复: 我现在就用 nowrap 了,挺好呢嘛

使用overflow属性,应该指定heigh和width值的,溢出来的那部分隐藏掉美观多了,另外还不影响SEO。

css菜鸟前来取经~

test一下下

从老肥整体页面可以看出,老肥对css确实研究得比较透,页面看起来,很有层次感,佩服!

我喜欢让它换行....哈哈..

呵呵,我好几天前就在用两句了,只不过没有像你这么乐于分享地把它写出来:)

另外,spam不会在前台输出的。


fisio 回复: 呵呵,看到你的了

这是IE私有的属性,放到非IE浏览器上面就不行鸟~


fisio 回复: white-space 和 overflow 都是标准属性。后面的确有两个非标准的,但是我说明了呀 😀

话说我前几天用了第一段代码,结果是Firefox2+3和IE 7下完美显示,但是在IE 6下却导致侧边栏跑到日志下方.一般是侧边某个模块超出CSS中的Width定义才会这样.


fisio 回复: 这的确是 IE6 的问题,IE6下主题撑破也是经常的事情了……解决办法是文中说的另外定义 width, 如果效果还不好,试试 IE hack 大法之——星号吧 :p

恩,溢出部分直接隐藏就可以了……

恩,两行得很不错,我喜欢:)

:nice: 学习啦,谢谢!

呵呵,这样就够用了:D

好地方,以后常来

还好。