CSS截取字符串删节号效果 兼容浏览器
日期：2014-05-17 浏览次数：20713 次
CSS截取字符串省略号效果 兼容浏览器
<!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>
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #000; }
ul {width: 300px;height:120px; margin: 40px auto;padding: 12px 4px 12px 24px;border: 1px solid #D4D4D4;background: #F1F1F1;}
li { margin: 12px 0; }
li a {display: block;width: 120px;overflow: hidden;/*注意不要写在最后了*/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>
</head>
<body>
<ul>
<li><a href="http://www.365css.cn/" title="欢迎光临www.365css.cn">中国中走过中国中走过中国中走过</a></li>
<li><a href="http://www.365css.cn/" title="CSS截取字符串省略号效果 兼容浏览器">CSS截取字符串省略号效果 兼容浏览器</a></li>
<li><a href="http://www.365css.cn/" title="CSS截取字符串省略号效果">CSS截取字符串省略号效果</a></li>
<li><a href="http://www.365css.cn/" title="欢迎光临www.365css.cn">欢迎光临www.365css.cn</a></li>
</ul>
</body>
</html>
<!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>
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #000; }
ul {width: 300px;height:120px; margin: 40px auto;padding: 12px 4px 12px 24px;border: 1px solid #D4D4D4;background: #F1F1F1;}
li { margin: 12px 0; }
li a {display: block;width: 120px;overflow: hidden;/*注意不要写在最后了*/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>
</head>
<body>
<ul>
<li><a href="http://www.365css.cn/" title="欢迎光临www.365css.cn">中国中走过中国中走过中国中走过</a></li>
<li><a href="http://www.365css.cn/" title="CSS截取字符串省略号效果 兼容浏览器">CSS截取字符串省略号效果 兼容浏览器</a></li>
<li><a href="http://www.365css.cn/" title="CSS截取字符串省略号效果">CSS截取字符串省略号效果</a></li>
<li><a href="http://www.365css.cn/" title="欢迎光临www.365css.cn">欢迎光临www.365css.cn</a></li>
</ul>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
