CSS截取字符串省略号效果兼容浏览器 -

wangrl

浏览: 148336 次
性别:
来自: 北京

最近访客更多访客>>

jmi_hua

qq234766237

hxgdragon

belllab

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS截取字符串省略号效果兼容浏览器

浏览器 CSS Firefox XHTML 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=utf-8" />  
    <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;}  


	/* wangruiling */
	.cutLen{
	display: block;
	width: 360px;
	overflow: hidden;
	white-space:nowrap;
	-o-text-overflow:ellipsis;
	text-overflow: ellipsis;}
    </style>  
    </head>  
      
    <body>  
    <ul>  
    <li><a href="#" title="欢迎光临#">欢迎光临#</a></li>  
    <li><a href="#" title="CSS截取字符串省略号效果 兼容浏览器">CSS截取字符串省略号效果 兼容浏览器</a></li>  
    <li><a href="#" title="CSS截取字符串省略号效果">CSS截取字符串省略号效果</a></li>  
    <li><a href="#" title="欢迎光临#">欢迎光临#</a></li>  
    </ul>  
	<br/>
	<ul>
	<li><a href="#" title="欢迎光临#" class="cutLen">欢迎光临#</a></li>  
    <li><a href="#" title="CSS截取字符串省略号效果 兼容浏览器" class="cutLen">CSS截取字符串省略号效果 兼容浏览器</a></li>  
    <li><a href="#" title="CSS截取字符串省略号效果" class="cutLen">CSS截取字符串省略号效果</a></li>  
    <li><a href="#" title="欢迎光临#" class="cutLen">【金融区】了解抵押贷款　对提升业绩有帮助－姚雪竹</a></li>  
	</ul>
    </body>  
    </html>

分享到：