<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css实现标题超出自动隐藏(兼容多浏览器)</title>
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
font-size:12px;
}
body {
padding:20px;
}
.test {
width:300px;
}
.test ul {
}
.test ul li {
clear: both;
height:22px;
overflow:hidden;
line-height:22px;
}
.test ul li a {
float:left;
margin-right:60px;
padding-right:10px;
color:#333;
text-decoration:none;
}
.test ul li a:hover {
text-decoration:underline;
color:#f60;
}
.test ul li span {
overflow:hidden;
display:inline;
margin-left:-60px;
width:60px;
height:22px;
font:11px/22px "Times New Roman", Times, serif;
color:#cdcdcd;
}
</style>
</head>
<body>
<div class="test">
<ul>
<li><a href="#">杂技团美女的演练</a><span>2009-05-12</span></li>
<li><a href="#">杂技女的演练</a><span>2009-05-12</span></li>
<li><a href="#">杂团美女的技团美女的团美sdsdsddsfdfsdffdfdf</a><span>2009-05-12</span></li>
<li><a href="#">杂技团美女的演练女的演练</a><span>2009-05-12</span></li>
<li><a href="#">杂技团美女的演练美女的演练美女的演练美女的演练333333</a><span>2009-05-12</span></li>
<li><a href="#">杂技团美女的练女的演练</a><span>2009-05-12</span></li>
<li><a href="#">杂技团美女的演练</a><span>2009-05-12</span></li>
<li><a href="#">杂技演练</a><span>2009-05-12</span></li>
<li><a href="#">杂技团美女的演练</a><span>2009-05-12</span></li>
<li><a href="#">杂技团演练</a><span>2009-05-12</span></li>
</ul>
</div>
</body>
</html>
