I have a div with width: 200px and I am adding text in it dynamically, I want the text to fit in this div but the text is getting out. I have tried to change the font size on character count but it does not work in all cases, like if string contains character with more width like W or M, the text goes out of the div.
Below is my code

if(cs >= 1 && cs <= 4) {
 if(this.engravingFontCaseSenstiveOptions(cText) == "Lower")
    {
        $('#overlay_image_text').css({'margin-top':'-162px'});
        $('#overlay_image_text').css({'font-size':60+'px'});
    }else if(this.engravingFontCaseSenstiveOptions(cText) == "Upper")
    {
        $('#overlay_image_text').css({'margin-top':'-154px'});
        $('#overlay_image_text').css({'font-size':48+'px'});
        $('#overlay_image_text').css({'margin-left':'0px'});
    }else
    {
        $('#overlay_image_text').css({'margin-top':'-162px'});
        $('#overlay_image_text').css({'font-size':60+'px'});
        $('#overlay_image_text').css({'margin-left':'0px'});
    }
 }
 else if(cs == 5) {
   if(this.engravingFontCaseSenstiveOptions(cText) == "Lower")
    {
        $('#overlay_image_text').css({'margin-top':'-152px'});
        $('#overlay_image_text').css({'font-size':54+'px'});
        $('#overlay_image_text').css({'margin-left':'0px'});
    }else if(this.engravingFontCaseSenstiveOptions(cText) == "Upper")
    {
        $('#overlay_image_text').css({'margin-top':'-143px'});
        $('#overlay_image_text').css({'font-size':45+'px'});
        $('#overlay_image_text').css({'margin-left':'0px'});
    }else
    {
        $('#overlay_image_text').css({'margin-top':'-143px'});
        $('#overlay_image_text').css({'font-size':45+'px'});
        $('#overlay_image_text').css({'margin-left':'0px'});
    }
}

Just a remark about your code, it would be much more elegant and performatic like this:

 var $overlay = $('#overlay_image_text'),
    engraving = this.engravingFontCaseSenstiveOptions(cText);

 if( engraving == "Lower")
    {
        $overlay.css({
            'margin-top':'-162px',
            'font-size':60+'px'
        });
    }else if(engraving == "Upper")
    {
        $overlay.css({
            'margin-top':'-154px',
            'font-size':48+'px',
            'margin-left':'0px'
        });
    }
    .
    .
    .

In general notes, evit calling the same function over and over again. And every time you all $("#") or .css({}) you're executing a function. This take serious effect if inside a large loop. Obs.: you should cache the var outside the loop but not in the global namespace, store somewhere it will not have attachaments as soon as possible.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.