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

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

标签：

Html/CSS Html5 CSS3

<!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="#">SOHO的手记，SOHO的日常，SOHO 的点点滴滴</a></li>   
<li><a href="#">SOHO的手记，SOHO的日常，SOHO 的点点滴滴</a></li>   
<li><a href="#">SOHO的手记，SOHO的日常，SOHO 的点点滴滴</a></li>   
<li><a href="#">SOHO的手记，SOHO的日常，SOHO 的点点滴滴</a></li>   
<li><a href="#">SOHO的手记，SOHO的日常，SOHO 的点点滴滴</a></li>   
<li><a href="#">SOHO的手记，SOHO的日常，SOHO 的点点滴滴</a></li>   
<li><a href="#">SOHO的手记，SOHO的日常，SOHO 的点点滴滴</a></li>   
</ul>   
</body>   
</html>

点击查看更多内容