• jQuery 控制div框自动缩小字体避免换行


    另外:jquery-textfill这个插件也可以实现,http://jquery-textfill.github.io/


    JS控制div框自动缩小字体填充,当div框中的字体超出div框范围的时候,框内的字体会自动缩小,以填充整个文本框;

    调用:resetFontSize($(".title"), 50, 10, 20);//重置字体大小 

    wordbox:jquery对象

    maxHeight:box的最大高度

    minSize:最小字体大小

    maxSize:最大字体大小

    [javascript] view plain copy
    1. this.resetFontSize=function (wordbox, maxHeight, minSize, maxSize) {  
    2.         //   var wordbox = $(".products .title");  
    3.         //最大高度  
    4.         //var maxHeight = 30;  
    5.         //初始化文字大小为最小  
    6.         wordbox.css('font-size', minSize + "px");  
    7.         maxSize++;  
    8.         wordbox.each(function () {  
    9.             //循环修改大小直至大于最大高度  
    10.             for (var i = minSize; i < maxSize; i++) {  
    11.                 if ($(this).height() > maxHeight) {  
    12.                     //当容器高度大于最大高度的时候,上一个尝试的值就是最佳大小。  
    13.                     $(this).css('font-size', (i - 2) + 'px');  
    14.                     //结束循环  
    15.                     break;  
    16.                 } else {  
    17.                     //如果小于最大高度,文字大小加1继续尝试  
    18.                     $(this).css('font-size', i + 'px');  
    19.                 }  
    20.             }  
    21.         });  
    22.     };  
  • 相关阅读:
    MVC与MVVM
    js正则删除字符串中的部分内容(支持变量和特殊符号)
    小程序之rpx适配方案
    表单元素内容禁用拼写检查
    vue组件实例的生命周期
    Windows下生成目录结构树命令
    DRF之解析器源码解析
    restful规范快速记忆
    python报错之OSError
    xlrd、xlwt
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13317532.html
Copyright © 2020-2023  润新知