放大/缩小文本以使用 jquery 动态填充 div？答案

【问题标题】：Enlarge / shrink text to dynamically fill a div using jquery?放大/缩小文本以使用 jquery 动态填充 div？
【发布时间】：2012-06-28 12:07:35
【问题描述】：

我看过一些类似的帖子并尝试了给出的答案，但我似乎无法让它工作（无论如何对我来说）。

基本上，我正在寻找能够自动调整（放大或缩小）我的文本以适应多行设置宽度 div 的东西。其中第 1 行是最大的，第 2 行较小，第 3 行最小的文本大小，并且（希望）在文本进行时证明文本的合理性。如果这有任何意义吗？

任何帮助将不胜感激！ :)

编辑：我忘了说它最多只能运行 2-3 行，设置的 div 宽度为 286px。

我尝试了以下代码：

;(function($) {
$.fn.textfill = function(options) {
    var fontSize = options.maxFontPixels;
    var ourText = $('span:visible:first', this);
    var maxHeight = $(this).height();
    var maxWidth = $(this).width();
    var textHeight;
    var textWidth;
    do {
        ourText.css('font-size', fontSize);
        textHeight = ourText.height();
        textWidth = ourText.width();
        fontSize = fontSize - 1;
    } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
    return this;
}
})(jQuery);
$(document).ready(function(e){
  $('.testimonial').textfill({ maxFontPixels: 36 });
});

Auto-size dynamic text to fill fixed size container

$( '.testimonial' ).each(function ( i, box ) {
    var width = $( box ).width(),
        html = '<span style="white-space:nowrap"></span>',
        line = $( box ).wrapInner( html ).children()[ 0 ],
        n = 100;
    $( box ).css( 'font-size', n );
    while ( $( line ).width() > width ) {
        $( box ).css( 'font-size', --n );
    }
    $( box ).text( $( line ).text() );
  });

JavaScript Scale Text to Fit in Fixed Div

【问题讨论】：

你试过什么？ mattgemmell.com/2008/12/08/what-have-you-tried我们能看看你到目前为止有什么吗？
另外，还不清楚您要做什么……每行是否必须有自己特定的字体大小？
是的，这很难解释.. 第 1 行是最大的字体，有 3-4 个字，第 2 行是 4-6 个字，稍微小一点等等.. 但希望它们是合理的太..

标签： jquery css font-size autoresize

【解决方案1】：

您需要根据您的描述自己编写代码，这样应该可以工作：

使用.innerWidth() 和.innerHeight() 获取div 的大小
根据您自己的数学公式，您可以根据包装 div 的大小设置您希望字体大小有多大的容差。使用 $.css('font-size','12px'); 等切换字体大小。

所以你会这样做：

 // get the size of the div
 var w = $('div').innerWidth();
 var h = $('div').innerHeight();

 // your own formula to your liking
 if (w >= 100) { fontsize = 11 }
 elseif (w >= 200) { fontsize = 12 }
 else { fontsize = 10 }

 //text to resize
 $('div span').css('font-size', fontsize + 'px');

或者也许有一个插件，尝试谷歌。

【讨论】：

非常感谢，我会试试看 :)