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