1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>显示隐藏文字</title> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 7 </head> 8 <body> 9 <div> 10 <p class="str">用js实现段落多余文字省略显示,ps：是段落不是一行。不要纯css的。不要jquery的。虽然最好是后台程序写，但是现在只要js的。用js实现段落多余文字省略显示,ps：是段落不是一行。不要纯css的。不要jquery的。虽然最好是后台程序写，但是现在只要js的。用js实现段落多余文字省略显示,ps：是段落不是一行。不要纯css的。不要jquery的。虽然最好是后台程序写，但是现在只要js的。用js实现段落多余文字省略显示,ps：是段落不是一行。不要纯css的。不要jquery的。虽然最好是后台程序写，但是现在只要js的。用js实现段落多余文字省略显示,ps：是段落不是一行。不要纯css的。不要jquery的。虽然最好是后台程序写，但是现在只要js的。用js实现段落多余文字省略显示,ps：是段落不是一行。不要纯css的。不要jquery的。虽然最好是后台程序写，但是现在只要js的。用js实现段落多余文字省略显示,ps：是段落不是一行。不要纯css的。不要jquery的。虽然最好是后台程序写，但是现在只要js的。</p> 11 </div> 12 <script type="text/javascript"> 13 14 function showandhide(sid,length) { 15 //显示或者隐藏教师机构部分信息 16 var str = $(sid).text(); 17 strlen = str.length; 18 if(strlen > length) { 19 newstr = str.slice(0,length); 20 $(sid).html(newstr + "...<a class=\'showall\' href=\'javascript:void(0)\'> 显示全部</a>"); 21 $(".showall").die().live("click",function(){ 22 $(this).parent().html(str + " <a class=\'hideall\' href=\'javascript:void(0)\'> 隐藏部分</a>"); 23 }); 24 $(".hideall").die().live("click",function(){ 25 $(this).parent().html(newstr + "...<a class=\'showall\' href=\'javascript:void(0)\'>显示全部</a>"); 26 }); 27 } 28 } 29 30 $(function(){ 31 showandhide(".str","90"); 32 }) 33 </script> 34 </body> 35 </html> 36
写的一个前端截字函数