css实现标题超出自动隐藏

作者：袖梨 2022-07-02

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title><a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>实现标题超出自动隐藏(兼容多浏览器)</title>

* {

margin:0;

padding:0;

list-style:none;

font-size:12px;

}

body {

padding:20px;

}

.test {

}

.test ul {

}

.test ul li {

clear: both;

overflow:hidden;

line-

}

.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;

font:11px/22px "Times New Roman", Times, serif;

color:#cdcdcd;

}

</style>

</head>

<body>

<ul>

<li><a href="#">杂技团美女的演练</a>2009-05-12</li>

<li><a href="#">杂技女的演练</a>2009-05-12</li>

<li><a href="#">杂团美女的技团美女的团美sdsdsddsfdfsdffdfdf</a>2009-05-12</li>

<li><a href="#">杂技团美女的演练女的演练</a>2009-05-12</li>

<li><a href="#">杂技团美女的演练美女的演练美女的演练美女的演练333333</a>2009-05-12</li>

<li><a href="#">杂技团美女的练女的演练</a>2009-05-12</li>

<li><a href="#">杂技团美女的演练</a>2009-05-12</li>

<li><a href="#">杂技团美女的演练</a>2009-05-12</li>

<li><a href="#">杂技团演练</a>2009-05-12</li>

</ul>

</div>

</body>

</html>

提示：您可以先修改部分代码再运行

css实现标题超出自动隐藏

相关文章

精彩推荐