码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-08-31 18:33:00      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

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

标签:

原文地址:http://www.cnblogs.com/Thelma/p/5826863.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!