昨天在BI看到有问问“怎么实现文字未超出时new小图片紧紧跟随li文字内容呢http://bbs.blueidea.com/thread-3010140-1-1.html”
如果用css来截断显示省略号并且兼容浏览器呢,就得顶宽度,这样就不能让后面的小图标紧跟文字后面了,如果用max-width呢,ie6又不兼容,其他浏览器是没有问题的
所以,我是这样处理
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!
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 >
< 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 >