<! 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 shows the excess part as a ellipsis. This method is compatible with Firefox _ script house _ 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 {
Display: block;
Width: 80px;
Overflow: hidden;/* do not write it at the end */
White-space: nowrap;
-O-text-overflow: ellipsis;
Text-overflow: ellipsis;
}
/* Firefox only */
Li: Not (p ){
Clear: both;
}
Li: Not (p) {
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 = "#"> technical space of suntear </a> </LI>
<Li> <a href = "#"> technical space of suntear </a> </LI>
<Li> <a href = "#"> technical space of suntear </a> </LI>
<Li> <a href = "#"> technical space of suntear </a> </LI>
<Li> <a href = "#"> technical space of suntear </a> </LI>
<Li> <a href = "#"> technical space of suntear </a> </LI>
<Li> <a href = "#"> technical space of suntear </a> </LI>
</Ul>
</Body>
</Html>
