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

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>
原文地址:https://www.cnblogs.com/Thelma/p/5826863.html