位置:首页>新闻中心>解决方案>两句CSS实现文字截断效果

两句CSS实现文字截断效果

发布时间:2012-7-30 10:04:42   文章来源:星翼设计(www.uwweb.net)   责任编辑:李飞

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

本文地址:http://www.uwweb.net/news/solution/327.html
责任编辑:李飞