两句 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; 是个非标准属性，我没有试过，不知道好不好用 🙂
竟然还没评论
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
好地方，以后常来
还好。