zoukankan      html  css  js  c++  java
  • 折叠多余文本内容,点击查看更多

    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>
  • 相关阅读:
    微信和支付宝支付模式详解及实现(.Net标准库)- OSS开源系列
    Linux+Nginx+Asp.net Core及守护进程部署
    Docker基础入门及示例
    this的指向问题
    H5C3-JS 此后面试暂不记录了 因为我发现了错题集,直接看就行了
    H5C3-JS day04
    H5C3-JS day03
    two-sum
    H5C3-JS day02
    三次握手四次挥手
  • 原文地址:https://www.cnblogs.com/Thelma/p/5826863.html
Copyright © 2011-2022 走看看