zoukankan      html  css  js  c++  java
  • 根据容器的高度进行截取字符的长度

      在实际工作中,很多时候都会有几行几行之后显示省略号的需求,都知道单行省略号的需求很简单,三个属性就实现了(overflow: hidden;text-overflow:ellipsis;white-space:nowrap;),但是多行的话,就稍微麻烦一些了,网上也有很多实现方法,但很多都不兼容,那下面就说一下用js实现多行之后多余的显示省略号。

      html:   

        <div class="div0">
          点击修改高度:
          <input type="radio" class="radio" value="50">50px
          <input type="radio" class="radio" value="80">80px
          <input type="radio" class="radio" value="110">110px
          <input type="radio" class="radio" value="140">140px
        </div>
        <div class="div">
          这是一种土方法,小时候常玩儿。背靠墙或椅背,以头枕部向后顶墙,头和身体不动,肌肉紧张收缩,后来听人说这叫"绷劲儿”;或者双手交叉放在头枕部,双手向前使劲儿,头枕部向后使劲儿,相互对抗,头颈不动。锻炼时,颈项部的肌肉持续紧张3?5秒,放松休息3?5秒为1个周期。每天锻炼100?200次,分5-10组完成。
        </div>

      css:

        * {
          margin:0;
          padding:0
        }
        html {
          font-size:14px;
        }
        .div0 {
          margin:30px;
        }
        .div {
          300px;
          height:50px;
          line-height:24px;
          border:1px solid #333;
          margin:30px;
          padding:5px;
        }

      js:

        $(function(){
          var div = $(".div");
          var font_s = parseInt(div.css("font-size"));
          var line_h = parseInt(div.css("line-height"));
          var div_h = div.height();
          var div_w = div.width();
          var len = Math.floor(div_w/font_s);
          var con = div.text();
          var con2 = con;
          var con_new = Math.floor(div_h/line_h);
          con2 = con2.replace(con2.substring(len*(con_new-1)+6,con2.length),"...");//替换
          div.text(con2)
          $(".radio").click(function(){
          $(this).attr("checked","checked").siblings().removeAttr("checked");
          div.height(this.value);
          div_h = div.height();
          var con_new = Math.floor(div_h/line_h);
          con3 = con.substring(0,len*(con_new-1)+6);//截取
          div.text(con3 + "...")
        })
      })

        

  • 相关阅读:
    SharePoint 2013 配置基于表单的身份认证
    SharePoint 2013 场解决方案包含第三方程序集
    SharePoint 2010 站点附加数据升级到SP2013
    SharePoint 2013 在母版页中插入WebPart
    SharePoint 2013 搭建负载均衡(NLB)
    SharePoint 部署解决方案Feature ID冲突
    SharePoint 2013 配置基于AD的Form认证
    SharePoint Server 2016 Update
    SharePoint 2013 为用户组自定义EventReceiver
    SharePoint 2013 JavaScript API 记录
  • 原文地址:https://www.cnblogs.com/xiaofang-FE/p/6835170.html
Copyright © 2011-2022 走看看