How to force a text to fit inside a div

[baig772]

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'});
    }
}

[AleMonteiro]

You can use word-wrap: break-word; to break the long words.
http://www.w3schools.com/cssref/css3_pr_word-break.asp

You can also use overflow: auto; to enable scrolling when the content is too big.

[AleMonteiro]

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.