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


    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>
  • 相关阅读:
    模板为webpack的目录结构
    实例和内置组件
    微信小程序之富文本解析
    微信小程序获取输入框(input)内容
    for循环的语法和执行顺序
    循环
    选择结构(二)
    选择结构
    算术运算
    变量
  • 原文地址:https://www.cnblogs.com/Thelma/p/5826863.html
Copyright © 2020-2023  润新知