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

  • 相关阅读:
    nginx 自启动脚本
    debian开机启动管理
    vagrant up connection time out
    vagrant在windows下的使用
    Office Web Apps Server
    邻接表模型中的节点移动
    Managing Hierarchical Data in MySQL(邻接表模型)[转载]
    play mp3 in c#
    2014年5月份第3周51Aspx源码发布详情
    2014年5月份第2周51Aspx源码发布详情
  • 原文地址:https://www.cnblogs.com/vali/p/7234656.html
Copyright © 2020-2023  润新知