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 + "...")
        })
      })

        

  • 相关阅读:
    HashMap,Hashtable,ConcurrentHashMap 和 synchronized Map 的原理和区别
    Collections.synchronizedMap()与ConcurrentHashMap的区别
    hashcode、equals和 ==详解
    Redis使用总结(二、缓存和数据库双写一致性问题)
    解决vue多个路由共用一个页面的问题
    RESTFUL API 安全认证方式
    Spring Bean详细讲解
    关于slf4j log4j log4j2的jar包配合使用的那些事
    slf4j、jcl、jul、log4j1、log4j2、logback大总结[转]
    经过测试,feign只能通过@RequestBody传对象参数
  • 原文地址:https://www.cnblogs.com/xiaofang-FE/p/6835170.html
Copyright © 2011-2022 走看看