网络编程
位置：首页>> 网络编程>> JavaScript>> css把超出的部分显示为省略号的方法兼容火狐

css把超出的部分显示为省略号的方法兼容火狐

　　发布时间：2010-10-07 09:02:44　

标签：css,超出的部分,省略号,兼容火狐

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">   
<html>   
<head>   
<meta http-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: 40px auto;    
padding: 12px 4px 12px 24px;    
border: 1px solid #D4D4D4;    
background: #F1F1F1;    
}    
li { margin: 12px 0; }    
li a {    
display: block;    
width: 80px;    
overflow: hidden;/*注意不要写在最后了*/    
white-space: nowrap;    
-o-text-overflow: ellipsis;    
text-overflow: ellipsis;    
}    
/* firefox only */    
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><a href="#">suntear的技术空间</a></li>   
<li><a href="#">suntear的技术空间</a></li>   
<li><a href="#">suntear的技术空间</a></li>   
<li><a href="#">suntear的技术空间</a></li>   
<li><a href="#">suntear的技术空间</a></li>   
<li><a href="#">suntear的技术空间</a></li>   
<li><a href="#">suntear的技术空间</a></li>   
</ul>   
</body>   
</html> 

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com