CSS截取字符串,兼容浏览器

今天在经典论坛看到有同学问到CSS截取字符多余省略号代替的求助且要兼容FF...

这个的确是个比较头痛的问题，现在我在的公司都是程序截取显示省略符的。兼容是没问题，但在中文和数学或字母混排时，就会有点小小的视觉缺陷。在程序截取中：中文、数字、字母都是算的一个字符，而中文占用宽度要宽，因此混排在视觉上会导致宽度不一就截取多余显示省略号了。。。

于是琢磨着一种方法如下：运用了切图技巧和CSS技巧最终实现兼容效果。哈哈！

 

代码

<! DOCTYPE html >
< head >
< meta charset ="utf-8" />
< meta name ="author" content ="庞淦..." >
< meta name ="keywords" content ="关键字..." >
< meta name ="description" content ="网站描述..." >
< meta name ="robots" content ="all" />
< title > CSS截取字符串,兼容浏览器 </ title >
< style type ="text/css" >
html,body,h1,h2,h3,h4,h5,h6,p,br,form,input,button,textarea,select,fieldset,blockquote,ul,ol,li,dl,dt,dd,pre { margin : 0 ; padding : 0 ; }
body { font : 12px/1.231 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif ; color : #333 ; }
h1,h2,h3,h4,h5,h6 { font-size : 14px ; font-weight : bold ; }
a { color : #333 ; text-decoration : none ; outline : none ; }
a:hover { color : #23930c ; text-decoration : underline ; }
textarea,select,input,button,label { vertical-align : middle ; font-size : 12px ; }
button { background : none ; border : none ; cursor : pointer }
address,cite,code,em,var,abbr,acronym { font-style : normal ; }
pre { font-size : 12px ; text-align : center ; white-space : pre-wrap ; word-wrap : break-word ; }
table { border-collapse : collapse ; table-layout : fixed }
div,li,dt,dd,p,pre,td,th { word-wrap : break-word ; word-break : break-all ; }
ol,ul { list-style : none ; }
li { list-style-position : outside }
img { border : none ; }
/* clear float */
.clearfix { clear : both ; height : 1% ; display : table ; display : inline-block ; }
.clearall { overflow : hidden ; _zoom : 1 ; }
.clear { clear : both ; font-size : 0 ; height : 0 ; line-height : 0 ; }
/* newsListBar */
.newsList { width : 200px ; }
.newsList li { height : 24px ; padding : 0 5px ; margin : 5px ; vertical-align : top ; border : #ccc solid 1px ; line-height : 24px ; overflow : hidden ; background-color : #F9F9F9 ; }
.newsList li a { display : block ; padding-right : 7px ; background : url(http://www.365css.cn/example/ellipsis_365css.cn/ellipsis.gif) no-repeat right bottom ; }
</ style >
</ head >
< body >
< ul class ="newsList" >
< li >< a href ="javascript:void(0)" > CSS截取字符串，超出用省略号代替 </ a ></ li >
< li >< a href ="http://www.4sonline.com.cn/web4s/index.jsp" > CSS截取字符串 </ a ></ li >
< li >< a href ="http://www.4sonline.com.cn/web4s/index.jsp" > 365CSS </ a ></ li >
< li >< a href ="http://www.4sonline.com.cn/web4s/index.jsp" > http://www.4sonline.com.cn/web4s/index.jsp </ a ></ li >
</ ul >
</ body >
</ html >

 

转载于:https://www.cnblogs.com/radom/archive/2011/01/05/1926463.html