autoSizeText

HTML

<div class='container'>
    <div class='no-resize'>This text won't be resized and will go out of the div.</div>
    <div class='resize'>This tedfsg dsf df gdsfgdfgdf dfg dfgdf gdf xddfg d gf sg df gdfg s f gsg f ds fgdfs gs dfg df gd dsfgdfgdfgdf df df df  d df t will be resized adfgdfs gsdfg dfgdsf gdf gsdf gdfsnd wont go out of the div.</div>
</div>

CSS

.no-resize, .resize {
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    color: #000;
    float: left;
    margin-left: 10px;
    font-size: 15px
}

CoffeeScript

autoSizeText = ->
    elements = $('.resize')
    console.log elements
    return if elements.length < 0

    for el in elements
      do (el) ->
        
        resizeText = ->
          elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px'
          $(el).css('font-size', elNewFontSize)

        resizeText() while el.scrollHeight > el.offsetHeight
            
$(document).ready -> autoSizeText()