另外：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.     };