折叠多余文本内容，点击查看更多

Posted 2020-08-05

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>