新闻资讯

分享互联网行业资讯,探寻网站建设新风向

两句CSS实现文字截断效果

日期:2012-07-30

常见最新评论列表一般有两种格式:路人甲 发表于 某某文章,或者 路人乙:引言…… 它们都有个问题,就是换行很难控制,长短不一,有时候内容还会把页面撑破。老肥研究了很久 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; 是个非标准属性,我没有试过,不知道好不好用。


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

在线客服

扫描二维码马上微信沟通:

  • 微信小程序定制开发、微信公众号定制开发
    微信小程序定制开发

  • 微信公众号代运营、微信公众号托管
    微信公众号开发运营

服务热线

0755-82685986 、 82685936

159-8667-8737(微信同号)
24小时热线电话,非工作时间自动呼叫转移

邮箱

marekt@iswweb.com
电子邮箱

扫码加微

15986678737 扫码加微信沟通
返回顶部