1、id
<p id="cut_str" title="您好, 温州市鹿城区南浦社区卫计服务中心(330302018) 南浦卫计中心">您好, 温州市鹿城区南浦社区卫计服务中心(330302018) 南浦卫计中心</p> <script> //js控制文字过多隐藏 function cutString(str, len) { //length属性读出来的汉字长度为1 if(str.length*2 <= len) { return str; } var strlen = 0; var s = ""; for(var i = 0;i < str.length; i++) { s = s + str.charAt(i); if (str.charCodeAt(i) > 128) { strlen = strlen + 2; if(strlen >= len){ return s.substring(0,s.length-1) + "..."; } } else { strlen = strlen + 1; if(strlen >= len){ return s.substring(0,s.length-2) + "..."; } } } return s; } var str = document.getElementById('cut_str').innerHTML; var s=cutString(str,36);//控制显示文字字符数 document.getElementById('cut_str').innerHTML=s; </script>2、class （ cutString(str,len)部分代码与id完全一样 ）
<p class="cut_str" title="您好, 温州市鹿城区南浦社区卫计服务中心(330302018) 南浦卫计中心">您好, 温州市鹿城区南浦社区卫计服务中心(330302018) 南浦卫计中心</p> <p class="cut_str" title="您好, 温州市鹿城区南浦社区卫计服务中心(330302018) 南浦卫计计中心</p> //js控制文字过多隐藏 function cutString(str, len) { //length属性读出来的汉字长度为1 if(str.length*2 <= len) { return str; } var strlen = 0; var s = ""; for(var i = 0;i < str.length; i++) { s = s + str.charAt(i); if (str.charCodeAt(i) > 128) { strlen = strlen + 2; if(strlen >= len){ return s.substring(0,s.length-1) + "..."; } } else { strlen = strlen + 1; if(strlen >= len){ return s.substring(0,s.length-2) + "..."; } } } return s; } $(".cut_str").each(function(){ $(this).html(cutString($(this).html(),20)); }); //以下document.getElementsByClassName()方法 IE8不支持！！！！！ var aStr = document.getElementsByClassName('cut_str'); for(var i=0; i<aStr.length; i++){ var str= aStr[i].innerHTML; var s=cutString(str,30);//控制显示文字字符数 aStr[i].innerHTML=s; }方法二：
不用加css3的相关样式，直接用jquery
<ul class="box"> <li><a href="#">人员档案维护</a></li> <li><a href="#">人员调动</a></li> </ul> .box li { height: 40px; } box li a { width: 300px; line-height: 20px; } <script> $(".box li").each(function(i){ var divH = $(this).height(); var $p = $("a", $(this)).eq(0); while ($p.outerHeight() > divH) { $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...")); }; }); </script>