两句 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
  • Kaylin Pra quem leva a sério esses argumentos desses links, é melhor nunca mais assistir um filme de Holywood. Todos sabem que Disney era conaorvsder para os padrões de lá. 人脸标签!体验 Picasa 网络相册新功能
  • Justice | | | | | inmidderen film izleme sitesi bedava filmler canlı film seyret binlerce filmler online sinema izletir beleÅŸ filmler filmini full izle ücretsiz sinema izleme sitesi filmini izle direk filmler son çıkan filmler vizyondan sonra full sinema izleme sitesi filmleri tam izle indirmeden bedava filim filmler full ve bedava 非常有创意的献血慈善广告
  • Mikel Congratulations on your spicy new name; and the expansion of your services.As a long time patron of ‘Chef Sazon’, I look forward to Roho Kitchen’s future success. Whether it is cooking classes, food and beverage pairing classes,event catering, or pop- up reratusants— I know that Roho Kitchen will always deliver an amazing culinary experience!. Semih Sayginer的开伦表演
  • Charlotte Gee willekirs, that's such a great post! 超牛的flash忍者游戏: N-Game

发表您的评论

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

: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

好地方,以后常来

还好。