最大文本大小可能裏面的div

Question

我正在尋找一種方法來一個div中的文本自動調整至其最大尺寸。最大尺寸是可能的最大尺寸，同時仍然適合div。

我知道這是不可能做到這一點的CSS。是否可以使用JavaScript？

Answer 1

可以在純JavaScript中使用這樣的伎倆 「自動調整」 字體大小：

window.onload = function() { 
    var oDiv = document.getElementById("Div1"); 
    oDiv.style.overflow = "auto"; //for Firefox, but won't ruin for other browsers 
    var fontSize = 14; 
    var changes = 0; 
    var blnSuccess = true; 
    while (oDiv.scrollWidth <= oDiv.clientWidth) { 
     oDiv.style.fontSize = fontSize + "px"; 
     fontSize++; 
     changes++; 
     if (changes > 500) { 
      //failsafe.. 
      blnSuccess = false; 
      break; 
     } 
    } 
    if (changes > 0) { 
     //upon failure, revert to original font size: 
     if (blnSuccess) 
      fontSize -= 2; 
     else 
      fontSize -= changes; 
     oDiv.style.fontSize = fontSize + "px"; 
    } 
}; 

Live test case。

開始與<div>的實際字體大小，如果你知道它，否則最好使用數量較少的第一個號碼。

上述代碼的工作原理是，當文本大於其容器的設置寬度時，「實際」寬度的scrollWidth屬性將大於設置的寬度。

編輯：如果overflow CSS屬性被設置爲默認「看得見」的價值 Firefox將不會更新scrollWidth屬性，因此必須將其設置爲「自動」 - 這個代碼是幹什麼的你，但如果您願意，也可以通過CSS設置它。