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

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

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

所以,我是这样处理

 


ExpandedBlockStart.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
>

            

<

href
="#"
>
·1.7《每日经济新闻》引用北京《每日经济新闻》引用北京美联市场研究部观点
</
a
>

            

<
img 
src
="http://bj.midland.com.cn/images/new.gif"
>

       

</
li
>

       

<
li
>

            

<

href
=""
>
·1.4“新浪二手房"
</
a
>

            

<
img 
src
="http://bj.midland.com.cn/images/new.gif"
>

       

</
li
>

       

<
li
>

            

<

href
=""
>
·12.30《每日经济新闻》引用北京美《每日经济新闻》引用北京美
</
a
>

            

<
img 
src
="http://bj.midland.com.cn/images/new.gif"
>

       

</
li
>

       

<
li
>

            

<

href
=""
>
·12.30《每日经济新闻》引用北京美《每日经济新闻》引用北京美
</
a
>

            

<
img 
src
="http://bj.midland.com.cn/images/new.gif"
>

       

</
li
>

       

<
li
>

            

<

href
=""
>
·12.30《每日经济新闻》引用北京美《每日经济新闻》引用北京美
</
a
>

            

<
img 
src
="http://bj.midland.com.cn/images/new.gif"
>

       

</
li
>

       

<
li
>

            

<

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

THE END
< <上一篇
下一篇>>