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>
  • 相关阅读:
    vs2013 调用只有dll文件的动态库(一)
    剑指offer 34.二叉树中和为某一值的路径
    JQuery中bind和unbind函数与onclick绑定事件区分
    实现 select中指定option选中触发事件
    页面中的checkbox多选值获取
    页面中href链接的碰撞
    页面中onclick事件引号问题
    页面间传输参数(两种传参方法)
    js的非空校验
    时间控件,选择日期
  • 原文地址:https://www.cnblogs.com/Thelma/p/5826863.html
Copyright © 2011-2022 走看看