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で設定することもできます。