zoukankan      html  css  js  c++  java
  • input 定宽,文本超出后缩小字体,尽可能多的显示文本

    1. 今天去的面试题

    解决方案:

    01,关键是获取到input中文本的宽度,用来和input的宽度做比较

    02,直接获取字符的宽度是不行的,因为可能是文本 字母 下划线什么的

    03,我们可以将input中的val,先拿出来,放到一个div中,获取这个div 的宽度

          就是文本的宽度,然后和input作比较;

    <!DOCTYPE html>  
    <html>   
    <head>  
      <script src="js/jquery.min.js"></script>  
    </head>  
    <body>  
      <div id='test01' style='color:black;line-height:1.2;white-space:nowrap;top:0px;left:0px;position:fixed;display:block;visibility:visible;'>  
          
      </div>  
      <input id="test" value="jdflkajdladkflkdsjflkaskdfjlksdjflksdfjlksdjfklsdj"style="200px;overflow:hidden;"/>
      <script>  
    //代码如下
        var str="回到家客户垫付科技活动客户付款时间大富科技第三方京东方款式大方.";  
        str = str.substring(0,str.length);  
        $("#test01").css({  
          "font-size": "12px",  
          "font-family": "Microsoft YaHei"  
        }).html(str);  
        var width = $("#labelText").width();  
        console.log(width);  
    
        var inputLen = $('#test').width();
        console.log('input 宽度:'+inputLen);
    
        if(width>inputLen){
            $('#test').css('font-size','30px')
        }
    </script>  
    </body>  
    </html>  

    2. 拿走不谢

  • 相关阅读:
    对struts2的简单理解
    对xml文件封装思想的处理
    反射技术
    设计模式之观察者模式
    设计模式之单例模式
    浅谈对象的克隆
    细说 过滤篇
    flex html 用flex展示html
    git同一文件由于文件名大小写不同导致不能合并
    关于C#引用Dll后,找不到命名空间的问题
  • 原文地址:https://www.cnblogs.com/vali/p/7234656.html
Copyright © 2011-2022 走看看