<!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>
