两句CSS完美截断侧栏最新评论列表

常见的侧栏最新评论列表一般有两种格式：路人甲 发表于 某某文章，或者 路人乙：引言…… 它们都有个问题，就是换行很难控制，长短不一，有时候内容还会把页面撑破。老肥研究了很久 CSS 手册，找到了一个符合标准的办法，像现在我的侧栏 widget 一样，强制只显示一行，多出来的一刀切断，是不是有点像 Gmail 里面的预览文字？方法很简单，比如我的侧栏 widget 是 ＜DIV class="widget"＞, 要对它下面的 ＜LI＞进行截断，那么用下面的 CSS 来强制不换行，溢出部分隐藏：

    视其父容器属性的不同，在 IE 下可能无法截断，那么在上面两句后再跟一个 width 定义就可以了。如果不喜欢一个字被切成两半，或者想多显示一行引言，可以这样做：

图1 截断侧栏后的效果

    这里里是给每个限定高度，溢出部分截断。em 是一个相对的单位，调试一下选一个合适的数值，一行两行都可以实现，像下图。或者用 max-height 代替 height, 兼容性待考。需要最后跟个省略号的话可以试试 text-overflow: ellipsis; 是个非标准属性。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!