將文本大小調整爲適合整個容器中的文本

我的目標是讓我的文本儘可能多地佔用容器中的空間而不會溢出。如果只有幾個字，它們將具有非常大的字體大小，反之如果有幾個字，則會導致更小的尺寸，這仍然佔用儘可能多的容器區域。將文本大小調整爲適合整個容器中的文本

所以，如果我有這個HTML

<div id="container"> 
    <h1 class="textFill">Make this fit as large as possible in the container</h1> 
</div>

和容器300像素

#container { 
    width: 400px; 
    height: 300px; 
    border: 1px solid blue; 
}

爲400我想文字來填補這一空間的全部。到目前爲止，我有這個腳本。

function textFill() { 
    $(".textFill").each(function() { 
     var 
     $text = $(this), 
     $parent = $text.parent(); 

     var 
     textW = $text.width(), 
     parentW = $parent.width(), 
     ratio = parentW/textW; 

     var 
     originalSize = parseFloat($text.css('font-size')), 
     newSize = originalSize * (1 * ratio); 

     $text.css("font-size", newSize); 

    });  
    }

這一切都是在http://jsfiddle.net/nz7h2858/41/

來源

2015-05-30 Chris

可能重複（http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container） – chrisp

不完全，這些解決方案不會將字體縮放到最大值而不會溢出容器。 – Chris

http://jsfiddle.net/nz7h2858/42/

這似乎可正常工作的大部分時間。偶爾一些文本會超出範圍，但只是略微。希望這足以讓你開始！

觀光注意到：

.textFill { 
    display: inline; 
}

因爲h1爲塊元素，則默認爲全寬的它的父。所以你的寬度比例總是1：1。其次，你還需要考慮身高。所以：

textW = $text.width(), 
textH = $text.height(), 
parentW = $parent.width(), 
parentH = $parent.height(), 
ratio = (parentW + parentH)/(textW + textH);

來源

2015-05-30 23:29:51

當body font-size或font-family被設置爲某個值時，這似乎會中斷。例如，當body字體大小爲10px時，div未填充。如果正文字體大小是48px，那麼div行間距會增加，但字體太小。也許字體大小計算需要一些額外的調整？ – Roberto

我會增加字體大小，直到元素超出其父界限。

然後減小一個字體大小。

textFill(); 

$(window).resize(textFill); 

function textFill() { 
    var tf= $('.textFill'); 
    for(var i = 1 ; ; i++) { 
    tf.css('font-size', i); 
    if(tf.outerHeight(true) > tf.parent().innerHeight() || 
     tf[0].scrollWidth > tf.width() 
    ) { 
     break; 
    } 
    } 

    tf.css('font-size', i-1); 
}

Fiddle

[基於容器的寬度字體定標]的

來源

2015-05-30 23:37:54

似乎最好的解決方案，因爲它使用反饋循環來實際檢查。否則，它將需要涉及字體大小，行高，填充等的棘手計算。 – Roberto

將文本大小調整爲適合整個容器中的文本

回答

相關問題