Bootstrap- 自動調整 div 內的字體

Question

我有一個 div，我可以在其中寫入最多 20 個字符的任何文本。 但是文本正在脫離 div。

我通過減少字符數的font-size屬性來設置它，但它並不適用於所有情況。 有沒有辦法通過應用任何twitter bootstrap規則來做到這一點？

<div id="overlay_image_text"></div>
if(cs < 6)
    {
        if(this.engravingFontCaseSenstiveOptions(cText) == "Lower")
        {
         $('#overlay_image_text').css({'margin-top':'-170px'});
         $('#overlay_image_text').css({'font-size':68+'px'});
        }
        else if(this.engravingFontCaseSenstiveOptions(cText) == "Upper"){
        $('#overlay_image_text').css({'margin-top':'-154px'});
        $('#overlay_image_text').css({'font-size':48+'px'});
    }
else{
$('#overlay_image_text').css({'margin-top':'-170px'});
$('#overlay_image_text').css({'font-size':64+'px'});
}
}
else if(cs > 5 && cs <= 7)
{
if(this.engravingFontCaseSenstiveOptions(cText) == "Lower")
{
$('#overlay_image_text').css({'margin-top':'-152px'});
$('#overlay_image_text').css({'font-size':47+'px'});    
}
else if(this.engravingFontCaseSenstiveOptions(cText) == "Upper")
{
$('#overlay_image_text').css({'margin-top':'-140px'});
$('#overlay_image_text').css({'font-size':35+'px'});    
}
else
{
 $('#overlay_image_text').css({'margin-top':'-152px'});
 $('#overlay_image_text').css({'font-size':47+'px'});   
}
}

父元素的 CSS

element.style {
    display: block;
    font-family: Cherokee;
}

Answer 1

需要查看包含它的父元素的 CSS 代碼，但請嘗試

#overlay_image_text {
      width:100%;
      font-size: auto;
}

希望你明白。 此外，根據需要以%應用填充/邊距。

Answer 2

你在找這個嗎？

基本上，我利用 CSS 中的scale()並使文本適合其父級。 如果您需要進一步解釋，請發表評論;)

 $(function(){ $("#text").on("input", function(){ var thisWidth = $(this).width(); var parentWidth = $(this).parent().width(); var scalingFactor = parentWidth/thisWidth; if (thisWidth > parentWidth) { $(this).css("transform", "scale("+scalingFactor+")"); } else { $(this).css("transform", "scale(1)"); } }); })

 #box { width:400px; background:#D8557F; border:10px solid #D8557F; height:100px; } #text { font-size:54px; white-space: nowrap; float:left; transform-origin:left; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="box"> <div id="text" contenteditable="true"> Edit me! </div> </div>