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>
  • 相关阅读:
    微信小程序上拉分页
    关于检测数据类型,三种方法(typeof,instanceof,Object.prototype.toString.call())优缺点
    如何在Devc++中配置OpenCv
    数据库系统和应用
    这是一篇测试文档
    Pandas 表格合并
    es6一些好用的方法总结
    前端面试题
    超有趣! JS是怎么计算1+2!!!
    彻底理解闭包
  • 原文地址:https://www.cnblogs.com/Thelma/p/5826863.html
Copyright © 2011-2022 走看看