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

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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

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

wordbox:jquery对象

maxHeight:box的最大高度

minSize:最小字体大小

maxSize:最大字体大小

 this.resetFontSize=function (wordbox, maxHeight, minSize, maxSize) {           //   var wordbox = $(".products .title");           //最大高度           //var maxHeight = 30;           //初始化文字大小为最小           wordbox.css('font-size', minSize + "px");           maxSize++;           wordbox.each(function () {               //循环修改大小直至大于最大高度               for (var i = minSize; i < maxSize; i++) {                   if ($(this).height() > maxHeight) {                       //当容器高度大于最大高度的时候,上一个尝试的值就是最佳大小。                       $(this).css('font-size', (i - 2) + 'px');                       //结束循环                       break;                   } else {                       //如果小于最大高度,文字大小加1继续尝试                       $(this).css('font-size', i + 'px');                   }               }           });       };  

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

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

wordbox:jquery对象

maxHeight:box的最大高度

minSize:最小字体大小

maxSize:最大字体大小

 this.resetFontSize=function (wordbox, maxHeight, minSize, maxSize) {           //   var wordbox = $(".products .title");           //最大高度           //var maxHeight = 30;           //初始化文字大小为最小           wordbox.css('font-size', minSize + "px");           maxSize++;           wordbox.each(function () {               //循环修改大小直至大于最大高度               for (var i = minSize; i < maxSize; i++) {                   if ($(this).height() > maxHeight) {                       //当容器高度大于最大高度的时候,上一个尝试的值就是最佳大小。                       $(this).css('font-size', (i - 2) + 'px');                       //结束循环                       break;                   } else {                       //如果小于最大高度,文字大小加1继续尝试                       $(this).css('font-size', i + 'px');                   }               }           });       };  

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!