css将超出的部分显示为省略号的方法(兼容火狐)
css将超出的部分显示为省略号的方法(兼容火狐)，有效部分已用颜色标出。
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"c>
<title>css把超出的部分显示为省略号的方法兼容火狐</title>
<style>
*{margin:0;padding:0;}
a{text-decoration:none;color:#000;}
a:hover{text-decoration:none;color:#000;}
ul{
width:300px;
margin:40pxauto;
padding:12px4px12px24px;
border:1pxsolid#D4D4D4;
background:#F1F1F1;
}
li{margin:12px0;}
lia{
display:block;
width:80px;
overflow:hidden;/*注意不要写在最后了*/
white-space:nowrap;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
}
/*firefoxonly*/
li:not(p){
clear:both;
}
li:not(p)a{
max-width:170px;
float:left;
}
li:not(p):after{
content:"...";
float:left;
width:25px;
padding-left:5px;
color:#000;
}
</style>
</head>
<body>
<ul>
<li><ahref="#">suntear的技术空间</a></li>
<li><ahref="#">suntear的技术空间</a></li>
<li><ahref="#">suntear的技术空间</a></li>
<li><ahref="#">suntear的技术空间</a></li>
<li><ahref="#">suntear的技术空间</a></li>
<li><ahref="#">suntear的技术空间</a></li>
<li><ahref="#">suntear的技术空间</a></li>
</ul>
</body>
</html>