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

  • 相关阅读:
    JS获取元素的子元素
    js iframe
    获取窗口句柄
    python 从PDF中提取附件
    xlwings 使用方法
    基于KNN的发票识别
    爬取漫画网站并进行图片拼接
    用python实现对元素的长截图
    Head First C 第三章总结
    Ruby on Rails Tutorial 第八章笔记 基本登陆功能
  • 原文地址:https://www.cnblogs.com/vali/p/7234656.html
Copyright © 2011-2022 走看看