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