CSS 超出隐藏实现限制字数的功能代码(多浏览器)-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_3851/article/details/82089682

下面是用js实现的通过计算数字的长度进行截取的，但对于中文跟英文一样算一个，是肯定不行的了，脚本之家以前发布过js计算字符串长度的，中文算两个字符的文章，可以参考下。
<!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>JS test</title>
<style type="text/css">
*{
 margin:0;
 padding:0;
}
body{
 padding:10px;
 font-family:Arial;
}
#ididid{
 width:150px;
 line-height:20px;
 overflow:hidden;
 border:1px solid #999;
}
</style>
</head>
<body>
<script type="text/javascript">
function testAuto(thisId,needLeng){
 var ididid = document.getElementById(thisId);
 var nowLeng = ididid.innerHTML.length;
 if(nowLeng > needLeng){
  var nowWord = ididid.innerHTML.substr(0,needLeng)+'...';
  ididid.innerHTML = nowWord;
 }
}
</script>
<div id="ididid">12345678901234567890test test test test test test test test test test test test test test test test test test test test test test test</div>
<script type="text/javascript">
testAuto('ididid',15)
</script>
</body>
</html>


--------------------------------------------------
--------------------------------------------------
这个是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>