|
CSS超出文本用省略号显示 兼容firefox IE6 IE7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www./TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>css写省略号方法</title> <style> ul { width: 300px; /*UL 的宽度*/ margin: 40px auto; padding: 12px 4px 12px 24px; border: 1px solid #D4D4D4; background: #F1F1F1; list-style:none; } li { margin: 12px 0; } /* IE ON li a { display: block; width: 220px; /* li 的宽度 这个控制显示多少字后显示...设的宽度大于字数时， 是不会显示...的 */ overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } /* firefox on li:not(p) { clear: both; } li:not(p) a { max-width: 170px; /*只有FF识别*/ float: left; } li:not(p):after { content: "..."; float: left; width: 25px; padding-left: 5px; color: #000; } </style> </head> <body> <ul> <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li> <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li> <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li> <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li> <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li> <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li> <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li> </ul> </body> </html> |
|
|
