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

原文地址:https://www.cnblogs.com/vali/p/7234656.html