放大/縮小文本動態填充使用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？

回答

相關問題