<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<meta http-equiv= "Content-type" c>
<title>css a way to display the excess as an ellipsis compatible with the Firefox _ cloud-Habitat Community _www.jb51.net</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;/* pay attention not to write at the end of the * *
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>
<body>
<ul>
<li><a href= "#" >suntear Technical space </a></li>
<li><a href= "#" >suntear Technical space </a></li>
<li><a href= "#" >suntear Technical space </a></li>
<li><a href= "#" >suntear Technical space </a></li>
<li><a href= "#" >suntear Technical space </a></li>
<li><a href= "#" >suntear Technical space </a></li>
<li><a href= "#" >suntear Technical space </a></li>
</ul>
</body>
