两句 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; 是个非标准属性,我没有试过,不知道好不好用 🙂

最新评论

  • fisio 可不,Google Reader 都去世十年了… Google Reader 的分享和效率
  • 轻重 天哪!今天整理Evernote,发现这条2010年的剪藏笔记,点击连接,原网站还在!12年了,中文互联网早已面目全非! Google Reader 的分享和效率
  • 小波 重新改博客,看看以前的wp小伙伴的博客,发现绝大部分都关了,没想到你的还在,只是停在11年了 我为什么爱 Twitter
  • 心灵博客 当年有这个效果已经很不错哦 diy 山寨投影家庭影院
  • fisio 可不咋地!您也是老司机了 我为什么爱 Twitter

发表您的评论

评论将回复给

😀🙂😯😁🙁😄😆😝😜👍🌈💖🎂

目前有 25 条评论

竟然还没评论

CSS达人,赞一个

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

我个人更喜欢这种截断,嘿嘿

不喜欢输出评论列表

因为Spam太多了

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

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

我现在就用 nowrap 了,挺好呢嘛

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

css菜鸟前来取经~

test一下下

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

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

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

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

呵呵,看到你的了

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

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

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

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

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

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

👍 学习啦,谢谢!

呵呵,这样就够用了:D

好地方,以后常来

还好。