昨天在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>
<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>
浙公网安备 33010602011771号