放大/缩小文本动态填充使用jQuery的div？

我见过一些类似的帖子，并尝试给出的答案，但我似乎无法得到这个工作（反正我）。放大/缩小文本动态填充使用jQuery的div？

基本上我寻找的东西，它会自动调整（放大或缩小），我的文字，以适应一组宽度DIV多行。在第一行是最大的，第二行较小，第三行最小的文本大小，并（希望）证明文本，因为它沿着..如果这是有道理的呢？

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

编辑：我忘了提及它将只运行在最上方2-3行与286px一组DIV宽度。

我尝试了以下代码：

;(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

JavaScript Scale Text to Fit in Fixed Div

来源

2012-06-27 Leanne Seawright

你有什么试过？ http://mattgemmell.com/2008/12/08/what-have-you-tried/ 我们可以看到你有什么这么远吗？ – andrewdotnich

此外，它不完全清楚你想要做什么......每一行都必须有自己特定的字体大小？ – andrewdotnich

星爷很难解释..线1是3-4的话，2号线的最大字体是4-6的话，稍微小一些等等..但希望他们能得到合理的太.. –

您需要根据您的描述，以这个自己的代码，这样的事情应该工作：

获取div的大小使用.innerWidth()和.innerHeight()
根据自己的数学公式，你会设置你有多大希望被视包装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');

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

来源

2012-06-27 05:18:47

作品添加代码我写了这个例子之后。 Arghhh。 –

非常感谢，我会为此付出:) –

放大/缩小文本动态填充使用jQuery的div？

回答

相关问题