<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用CSS截字</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #df3a0e;
}
ul {
width: 200px;
margin: 40px auto;
padding: 12px 4px 12px 24px;
border: 1px solid #005fb0;
background: #e0f1ff;
}
li {
margin: 12px 0;
width: 200px;
}
li a {
display: block;
width: 200px;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
/* firefox only */
li:not(p) { /* wtf is? pls let me know*/
clear: both;
}
li:not(p) a {
max-width: 170px;
float: left;
}
li:not(p):after {
content: "...";
float: left;
width: 25px;
padding-left: 5px;
color: #df3a0e;
}
</style>
</head>
<body>
<ul>
<li><a href="#" title="引只處藝">引只處藝</a></li>
<li><a href="#" title="除食有回，股發車個但色了又樣一苦場苦的容流有和為施會">除食有回，股發車個但色了又樣一苦場苦的容流有和為施會</a></li>
<li><a href="#" title="面天也產毒知產自什，腳子流去加心？">面天也產毒知產自什，腳子流去加心？</a></li>
<li><a href="#" title="像回未房天的近再，星體西記為形實人">像回未房天的近再，星體西記為形實人</a></li>
<li><a href="#" title="更可團調學聲足經光靜，小結特股子道們光要常選之他東發有吃位一重企直不招小回建以法來始切其友程陸雄像下看鄉增">更可團調學聲足經光靜，小結特股子道們光要常選之他東發有吃位一重企直不招小回建以法來始切其友程陸雄像下看鄉增</a></li>
<li><a href="#" title="的相身飛葉印白感，在有面力都年線前受長幾南說腦他叫開原">的相身飛葉印白感，在有面力都年線前受長幾南說腦他叫開原</a></li>
</ul>
</body>
</html>
