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()并使文本适合其父项。如果您需要进一步说明，请发表评论;）

＆＃13;

＆＃13;

$(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)");
    }
  });
})

＆＃13;

#box {
  width:400px;
  background:#D8557F;
  border:10px solid #D8557F;
  height:100px;
}

#text {
  font-size:54px;
  white-space: nowrap;
  float:left;
  transform-origin:left;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;