NO.44 文字超出显示省略号后面小图标紧跟文字后面

昨天在BI看到有问问“怎么实现文字未超出时new小图片紧紧跟随li文字内容呢http://bbs.blueidea.com/thread-3010140-1-1.html”

如果用css来截断显示省略号并且兼容浏览器呢，就得顶宽度，这样就不能让后面的小图标紧跟文字后面了，如果用max-width呢，ie6又不兼容，其他浏览器是没有问题的

所以，我是这样处理

 

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 无标题文档 </ title >
< style >
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td  {
    padding :  0 ;
    margin :  0 ;
}
ol, ul  {
    list-style :  none ;
}
fieldset, img  {
    border :  0 ;
}
body  {
    font-family : "", sans-serif ;
    background : #fff ;
    font-size : 12px ;
    line-height : 21px ;
}
</ style >
</ head >
< body >
< div  class ="contenta_news"  id ="box" >
    < ul >
        < li >
             < a  href ="#" > ·1.7《每日经济新闻》引用北京《每日经济新闻》引用北京美联市场研究部观点 </ a >
             < img  src ="http://bj.midland.com.cn/images/new.gif" >
        </ li >
        < li >
             < a  href ="" > ·1.4“新浪二手房" </ a >
             < img  src ="http://bj.midland.com.cn/images/new.gif" >
        </ li >
        < li >
             < a  href ="" > ·12.30《每日经济新闻》引用北京美《每日经济新闻》引用北京美 </ a >
             < img  src ="http://bj.midland.com.cn/images/new.gif" >
        </ li >
        < li >
             < a  href ="" > ·12.30《每日经济新闻》引用北京美《每日经济新闻》引用北京美 </ a >
             < img  src ="http://bj.midland.com.cn/images/new.gif" >
        </ li >
        < li >
             < a  href ="" > ·12.30《每日经济新闻》引用北京美《每日经济新闻》引用北京美 </ a >
             < img  src ="http://bj.midland.com.cn/images/new.gif" >
        </ li >
        < li >
             < a  href ="" > ·12.30《每日经济新闻》引用北京美《每日经济新闻》引用北京美 </ a >
             < img  src ="http://bj.midland.com.cn/images/new.gif" >
        </ li >
    </ ul >
</ div >
</ body >
< script >
function  nowrap(){
         var  tit  =  document.getElementsByTagName( " a " )
         for (i = 0 ; i < tit.length ; i ++ ){
             if (tit[i].innerHTML.length  >   20 ){
                tit[i].innerHTML  =  tit[i].innerHTML.substring( 0 , 20 )  +   " ... " ;
            } else {
                tit[i].style.width  =  tit[i].innerHTML.length
            }
        }
    }
    nowrap()
</ script >
</ html >

 

 

 

转载于:https://www.cnblogs.com/00fairy00/archive/2011/01/15/1936353.html