CSS截取字符串省略号效果兼容浏览器-优快云博客

本文链接：https://blog.youkuaiyun.com/wangruiling/article/details/83937543

本文介绍了一种实现CSS中字符串省略号效果的方法，并确保该效果在不同浏览器中的兼容性。通过设置特定的CSS样式，如使用white-space: nowrap及text-overflow: ellipsis属性，可以使得过长的文字被截断并以省略号形式显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


    <!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>