Twitter Bootstrap Question posted in

Bootstrap- Automatically adjust the font inside a div – Twitter bootstrap

I have a div in which I can write any text up to 20 characters. But the text is getting out of the div. enter image description here

I am setting it by decreasing font-size property on character count but it is not applicable on all cases.
Is there any way to do it by applying any twitter bootstrap rule?

<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 for parent element

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

2

Answers


  1. 0

    Would need to see the CSS code of the parent element containing it but try 

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

    Hope you get the idea. Also, apply padding/margin in % as needed.

    Login or Signup to reply.
  2. 0

    Are you looking for this?

    Basically, I take advantage of the scale() in CSS and make the text fit in its parents. Please comment if you need further explanation 😉

    $(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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search