所以我對重新調整字體大小的功能工作,使文本填充儘可能多的容器儘可能多行不溢出。例如,功能不火的負荷,但可在調整大小
我希望文本涵蓋儘可能多的專區內地區的1200像素的溢出無盡可能。這個腳本在上調用,但沒有加載。
$(document).ready(textFill);
$(window).resize(textFill);
function textFill() {
$(".textFill").each(function() {
var
$text = $(this),
$parent = $text.parent();
var
textW = $text.width(),
textH = $text.height(),
parentW = $parent.width(),
parentH = $parent.height(),
ratio = (parentW + parentH)/(textW + textH);
var
originalSize = parseFloat($text.css('font-size')),
newSize = originalSize * (.9 * ratio);
$text.css("font-size", newSize);
});
}
#container {
width: 400px;
height: 300px;
border: 1px solid blue;
}
.textFill {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<h1 class="textFill">Make this fit as large as possible.</h1>
</div>
當我調整,它填補了容器,但onload事件似乎並不火。
編輯:函數在文檔準備就緒時觸發,但它不考慮父類的完全加載的尺寸。相反,它將父母身高測量爲文字的高度。
此外,我不確定resize事件是否是我想使用的事件,因爲它應該只調整字體大小,也許我應該只在父維度的變化上執行,這可能嗎?
這裏是fiddle ..
出於某種原因,您的函數第二次被調用。例如如果你在document.ready中調用你的函數兩次,它就會工作。我正在努力,爲什麼它的行爲如此 –
還有一點點延遲添加。不需要運行兩次即可工作。看起來好像該腳本正在快速執行:http://jsfiddle.net/nz7h2858/46/ – HaukurHaf
如果您在不調用該函數的情況下運行該文本,則文本更小。你的函數使得它在第一次調用時變得更大一些,然後在第二次調用時更大一些,在第三次調用時左右,或者大致達到平衡。它與什麼時候或如何調用無關,它是功能的邏輯,它需要幾個調用才能平均,這是有道理的,因爲它是基於每次調用都會改變的「原始大小」。 –