• 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. 拿走不谢

  • 相关阅读:
    WCF进行大数据传输时的相关配置(转)
    自定义绑定(转)
    菜鸟学TSQLSQL2005读书笔记1
    再别康桥英文及译文
    自定义绑定2
    我要读的书
    菜鸟学TSQLSQL2005读书笔记
    Bad Habbits
    实践测试驱动开发
    针对接口写测试用例
  • 原文地址:https://www.cnblogs.com/vali/p/7234656.html
Copyright © 2020-2023  润新知