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


      在实际工作中,很多时候都会有几行几行之后显示省略号的需求,都知道单行省略号的需求很简单,三个属性就实现了(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 + "...")
        })
      })

        

  • 相关阅读:
    完整的 mime type 列表
    安装chrome扩展json-handle
    在没有go-pear.bat的php中安装pear
    windows下安装PhpDocumentor(phpdoc)笔记
    【MySQL】批量数据循环插入
    thinkPHP 3.2.3操作MongoDB指南
    给深度学习入门者的Python快速教程
    为什么人工智能用Python
    计算机英语(一)
    Java 基础生词表
  • 原文地址:https://www.cnblogs.com/xiaofang-FE/p/6835170.html
Copyright © 2020-2023  润新知