Javascript Font-Resizer Overflow Div

Question

私は、要素のfont-sizeがjavascriptによって決定されるウェブサイト（scibowltest.github.io）で作業してきました。ウェブサイトにアクセスすると、ブラウザをフルサイズと高さにしてラップトップ/デスクトップに表示すると問題なく表示されます。ただし、幅を小さくするようにウィンドウのサイズを変更すると、フォントが含まれているはずのdivをオーバーフローするようになります。

次のコードは、フォントサイズの大きさを決定する関数font-sizerのコードです。

function fontSizer(text, box, scale) { 
    var textID = "#" + text; 
    var boxID = "#" + box; 
    var boxHeight = $(boxID).height(); 
    var boxWidth = $(boxID).width(); 
    var fontSize = 0; 
    if (boxHeight >= boxWidth) { 
    fontSize = (boxWidth * scale) + "px"; 
    } else if (boxHeight < boxWidth) { 
    fontSize = (boxHeight * scale) + "px"; 
    } else {} 

    var textHeight = $(textID).height(); 
    var textWidth = $(textID).width(); 

    if (textWidth > boxWidth) { 
    fontSize = ((fontSize * (scale * boxWidth))/(textWidth)) + "px"; 
    } else {} 

    $(textID).css("font-size", fontSize); 
} 

この関数は、テキストを含むdiv（ボックス）の小さい方の寸法に基づいて機能します。ただし、最後のif文は、テキストの幅がdivの幅より大きいため、テキストの幅がdivの幅とスケールの倍数になるようにフォントサイズを縮小しようとします。

明らかに、ウェブサイトを見ると、この最後のif文は機能しません。誰かが助けることができたら、私はそれを感謝します！

Answer 1

純粋なCSSソリューションでは、異なる画面サイズである正確な用途に合わせた新しいlength unitsの一部を使用することができます。

vw、vh、vmin、vmaxで遊んで、あなたに最高の結果を与えるものを見てください。私は個人的にはvminをたくさん使っています。

これは少しの手間が必要ですが、JavaScriptの使用を排除します。

また、この例では<wbr>を使用しましたが（必要ではありませんが）、オーバーフローを防ぐための「単語区切り」があります。

div { 
 
    width: 40vmin; 
 
    font-size: 8vmin; 
 
    border: 1px solid red; 
 
    resize: both; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    width: 40vw; 
 
    font-size: 8vw; 
 
    border: 1px solid red; 
 
    resize: both; 
 
    text-align: center; 
 
}

resize the screen to see the fonts scale: 
 

 
<div>Start/<wbr>Stop</div> 
 

 
<p>Start/<wbr>Stop</p>