CSS 超出隐藏实现限制字数的功能代码(多浏览器)

时间：2016-02-08 07:44:08 阅读：180 评论：0 收藏：0 [点我收藏+]

CSS限制字数

复制代码

代码如下:

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; /* for IE */
-o-text-overflow: ellipsis; /* for Opera */
-icab-text-overflow: ellipsis; /* for iCab */
-khtml-text-overflow: ellipsis; /* for Konqueror Safari */
-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
-webkit-text-overflow: ellipsis; /* for Safari,Swift*/

看了上面的代码挺郁闷的，根本实现不了，看来好多站长对这种简单的代码都不测试就发了，郁闷。所以我们特别发一下我们自己用的，但firefox不兼容但可以使用，没有省略号。

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

下面是用js实现的通过计算数字的长度进行截取的，但对于中文跟英文一样算一个，是肯定不行的了，脚本之家以前发布过js计算字符串长度的，中文算两个字符的文章，可以参考下。

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

这个是css after实现的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" c> 
<title>css把超出的部分显示为省略号的方法兼容火狐_脚本之家_www.jb51.net</title> 
<style> 
* { margin: 0; padding: 0; } 
a { text-decoration: none; color: #000; } 
a:hover { text-decoration: none; color: #000; } 
ul { 
width: 300px; 
margin: 40px auto; 
padding: 12px 4px 12px 24px; 
border: 1px solid #D4D4D4; 
background: #F1F1F1; 
} 
li { margin: 12px 0; } 
li a { 
display: block; 
width: 80px; 
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="#">suntear的技术空间</a></li> 
<li><a href="#">suntear的技术空间</a></li> 
<li><a href="#">suntear的技术空间</a></li> 
<li><a href="#">suntear的技术空间</a></li> 
<li><a href="#">suntear的技术空间</a></li> 
<li><a href="#">suntear的技术空间</a></li> 
<li><a href="#">suntear的技术空间</a></li> 
</ul> 
</body> 
</html>

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

参考文章：
http://www.jb51.net/article/15239.htm
http://www.jb51.net/article/14210.htm

CSS 超出隐藏实现限制字数的功能代码(多浏览器)

原文：http://www.jb51.net/css/23271.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)