command:设定规定的行数,当文本内容超过时,折叠并有一个“查看更多”的按钮
step1:编写html......
<p statue="0" class="text close_text"> //status是自定义的属性,“0”是false,“1”为True texttexttextvvshjhhsbcnxgfggggkshjahcjbkjciwhiuheohbcjkbcnzlkxkjidjoieklkxm.,cxzmkcowdjijdpoweofjibvjksnvkowdohoblzxocwioueoifblkxnkjd </p>
<div class="show_more"> //设定“查看更多”的按钮
<a href="" class="show_more_btn">查看更多</a>
</div>
......
step2:设定样式css
.close_text{ display: -webkit-box; -webkit-box-orient: vertical;//当文本内容超过两行时,会显示省略号 -webkit-line-clamp: 2;//显示行数 word-break: break-all;//自动换行 overflow: hidden;//##隐藏多出的文本 } .show_more{ width:100%; text-align:right; } .show_more a{ text-decoration:none; font-family:SimSun; font-size:12px; color:#231815; }
step3:用jQuery编写效果
<script> $(function(){ $(".show_more_btn").click(function(){ var status=$(".text").attr("status"); if(status="1"){ overflow:hidden; $(".text").addClass(".close_text"); $(".text").attr("status",0); $(this).html("查看更多"); }else{ $(".text").removeClass(".close_text"); $(".text").attr("status",1); $(this).html("收起") } return false; }) }) </script>