2015-05-31 39 views
3

所以我對重新調整字體大小的功能工作,使文本填充儘可能多的容器儘可能多行不溢出。例如,功能不火的負荷,但可在調整大小

我希望文本涵蓋儘可能多的專區內地區的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 ..

+0

出於某種原因,您的函數第二次被調用。例如如果你在document.ready中調用你的函數兩次,它就會工作。我正在努力,爲什麼它的行爲如此 –

+0

還有一點點延遲添加。不需要運行兩次即可工作。看起來好像該腳本正在快速執行:http://jsfiddle.net/nz7h2858/46/ – HaukurHaf

+3

如果您在不調用該函數的情況下運行該文本,則文本更小。你的函數使得它在第一次調用時變得更大一些,然後在第二次調用時更大一些,在第三次調用時左右,或者大致達到平衡。它與什麼時候或如何調用無關,它是功能的邏輯,它需要幾個調用才能平均,這是有道理的,因爲它是基於每次調用都會改變的「原始大小」。 –

回答

1

正是由於

textH = $text.height() 

其每次調整的時間返回不同的值和文本保持高度增長使得newSize更大的價值。這就是爲什麼如果你多次撥打這樣的功能:

 textFill(); 
    textFill(); 
    textFill(); 
    textFill(); 
    textFill(); 

它會使文字變大。解決方案是控制CSS中的高度。

+0

這是正確的,但你無法用css控制高度,因爲這是整個點。函數背後的想法是將'h1'的大小與'div'的大小進行比較,以便能夠增加'h1'的字體大小,使h1內容與div的高度相同。要「填補」分區。 –

+0

@詹姆斯蒙塔涅那麼你應該根據父母身高來設置文字高度。像textH =父維度比例 –

+1

@Claudiu,你能否跟進你的評論:如何將文本高度設置爲父級比率來填充容器? – Chris

3

您在小提琴中的功能實際上是第一次運行,如果您指定的字體大小爲.textFill ..例如10px,您可以看到它。即使在第一次通話時,您也會看到它可以擴展到最大寬度。

主要問題是,您在每次調整大小事件(每次調用函數時)都重新讀取字體大小(originalSize),然後再次使用新大小進行計算。只有達到最大值後,才能得到預期的結果。

但是已經處理了之前因爲我真的不值得任何信用的回答這個問題,我就link to it here。 請務必查看該答案中包含的要點!

1

「textFill」函數在document.ready事件上觸發。你可以簡單地通過添加一些CSS樣式,使其可見證明這一點,e.g

$text.css({"font-size", newSize, "color": "red"}); 

我也搞不清關於計算的「比例」的方式。如果您只是試圖讓「h1」字體足夠大以填充外部容器,唯一要考慮的是保持足夠的垂直空間以避免「h1」與「div」框重疊。因此,該比率可能是這樣的:

var ratio = parentH/textH; 

此外,在「newSize」計算中有一個「0.9」的神奇數字。我不得不說我不知道​​它是如何發展的:)。

0

您只在窗口調整大小事件上調用textFill()函數。

如果你想在加載時調用這個函數,你可以像下面那樣實現。

$(window).load(function() { 

    textFill() 

}); 

在這兩個事件加載和調整事件大小調用你的函數。你可以使用下面的代碼片段。

$(window).on("load resize",function(){ 

    textFill() 

}) 
1

只是一些想法和計劃要做到這一點:

首先,你是固定的容器的寬度。因此,重新調整窗口大小不會產生任何影響。如果您的容器可能會更改大小,您可能需要重新調整大小,並且有大量關於如何執行此操作的示例。但現在,您可以刪除resize()行。它只是增加了混淆。

二,由於你是單詞包裝,計算並不容易。一個單詞可以確定字體大小(所以它不會比容器寬度大)。您可以通過將字體大小設置爲容器高度並找出最長的單詞來計算這一點,而不是從中計算最大字體大小。另一種可能性是字體大小將被限制爲文本包裝的多行。您可能會通過查看行間距以及文本寬度爲1px的字體大小來初步推測,但最終您將不得不嘗試幾種字體大小以查看文本實際包含的行數。出於這個原因,我建議寫一個循環。

您不希望試驗可見,因此您必須學會使其不可見或將其從屏幕上移開,以便瀏覽器仍可計算大小,但文檔或滾動條中沒有任何更改。第三,我將從最小和最大猜測字體大小(1像素和容器的高度)開始,然後我會在中間選取一個值,嘗試一下,看看它是否適合容器(寬度和高度),如果是,則將其設爲最小值,如果不是,則將其設爲最大值(如果結果相同,則完成)。我會繼續這樣做,直到最大值和最小值都在一個很小的值(比如1%)內,然後我會選擇最小值並且完成它。我還會對它進行最大數量的猜測(比如說25),如果我沒有在這些答案中得到答案,我也會選擇最小值並完成它(瀏覽器可能並不總是表現一致,所以這個是「以防萬一」的情況)。

代碼:

textFill(); 

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

     var 
     parentW = $parent.width(), 
      parentH = $parent.height(); 

     var minFontSize = 1; 
     var maxFontSize = parentH; 

     for (loop = 0; loop < 25; ++loop) { 
      var newFontSize = (minFontSize + maxFontSize)/2; 
      $text.css("font-size", newFontSize); 
      var textW = $text.width(); 
      var textH = $text.height(); 

      if (textW > parentW || textH > parentH) { 
       maxFontSize = newFontSize; 
      } else { 
       minFontSize = newFontSize; 
      } 

      if ((maxFontSize - minFontSize) * 100 < minFontSize) break; 
     } 

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

小提琴: http://jsfiddle.net/tncmrya6/

0

如果我深知,你正在尋找適合文本的寬度和高度,以股利。也許你應該從計算中刪除.9。請檢查this以查看這是否是您搜索的內容。

$(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); 
    console.log(ratio); 

var 
    originalSize = parseFloat($text.css('font-size')), 
    newSize = originalSize * ratio;//HERE'S BIG CHANGE :) 

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

}); 
} 
0

使用

window.onload = function() { 
    textFill(); 
} 

你並不需要特別使用jQuery來處理的東西,本身窗口句柄。

0

如果你想讓你的腳本執行onload,你可以這樣做。每次工作。

<script type='text/javascript'> 
window.addEventListener('DOMContentLoaded', function() { 
    textFill(); //Call your function here 
}); 

</script>