首页 > 代码库 > 根据容器的高度进行截取字符的长度

根据容器的高度进行截取字符的长度

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

  html:   

    <div class="div0">
      点击修改高度:
      <input type="radio" class="radio" value="http://www.mamicode.com/50">50px
      <input type="radio" class="radio" value="http://www.mamicode.com/80">80px
      <input type="radio" class="radio" value="http://www.mamicode.com/110">110px
      <input type="radio" class="radio" value="http://www.mamicode.com/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 {
      width: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 + "...")
    })
  })

    

 

根据容器的高度进行截取字符的长度