<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>限制文字字数--点击展开点击收起</title> <style> li{ list-style: none; } p{ width:300px; height:100px; text-indent:2em; line-height:150%; margin:5px 0 0; } p a{ color:#FDCD3D; } </style> </head> <body> <h1>一、</h1> <ul class="rdlist"> <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li> <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li> <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li> <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li> <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li> <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li> </ul> <h1>二、</h1> <div class=""> <a href="javascript:void" class="clickbtn"><<点击展开</a> <p>如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接</p> </div> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script> $(function(){ //一： console.log($('li').eq(0).children($('span')).text()); for(var i=0;i<$('li').length;i++){ var str = $('li').eq(i).children($('span')).text().substr(0,16) + " ..."; $('li').eq(i).children($('span')).text(str); } }); // 二： $(function(){ $("p").each(function(){ var maxwidth=60;//设置最多显示的字数 var text=$(this).text(); if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).html($(this).html()+"...");//如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接； }; $('.clickbtn').click(function(){ if($(this).text()=='<<点击展开'){ $(this).text('<<点击收起'); $('p').text(text); }else{ if($('p').text().length>maxwidth){ $('p').text($('p').text().substring(0,maxwidth)); $('p').html($('p').html()+"..."); $(this).text('<<点击展开'); }; } }); }) }) </script> </body> </html>