比如首页的右栏, 帖子标题经常会超出指定宽度,可以通过CSS来更为人性化的显示,若有超出宽度部分,以...来简略显示
可以使用以下CSS定义
[code].content_side_box{margin-bottom:16px;border:#b8d5ea 1px solid;text-align:left;background-color:#ffffff;line-height:18px;} /*侧栏内容*/
.content_side_box table{background:#F9F5EE;border:#E7D1B0 1px solid;}
.content_side_box ul{padding:10px; margin:0px;list-style:none ;}
.content_side_box li{height:18px;overflow:hidden;}/*ie8*/
.content_side_box li img{float:left;line-height:1.8;}
.content_side_box li a span{float:left;cursor:pointer;white-space:nowrap;width:130px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow: ellipsis;-moz-binding: url('/images/pub/ellipsis.xml#ellipsis');}[/code]
各测试器环境实际效果:
IE8.0: 无效果,但文字不会出现半截的情况
IE7.0,IE8.0: 完美截取
firefox: 使用XUL来实现截取. 需要额外的XML文件
opera: 采用opera私有属性 -o-text-overflow完美截取
Netscape: 无效果,且文字会出现半截断的情况
Chrome: 完美支持
|