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 text will be resized and wont go out of the div.</div>
  <div class='no-resize nowrap'>This text won't be resized and will go out of the div.</div>
  <div class='resize nowrap'>This text will also be resized and wont go out of the div.</div>
</div>

CSS

.no-resize, .resize {
  width: 100px;
  height: 50px;
  border: 1px solid #000;
  color: #000;
  margin: 20px 0;
  font-size: 15px
}
.nowrap {
  width: 250px;
  white-space: nowrap;
}

JavaScript

(function() {
  var elements = $('.resize');
  if(elements.length < 0) {
    return;
  }
  elements.each(function(i, element) {
    while(element.scrollWidth > element.offsetWidth || element.scrollHeight > element.offsetHeight) {
      var newFontSize = (parseFloat($(element).css('font-size').slice(0, -2)) * 0.95) + 'px';
      $(element).css('font-size', newFontSize);
    }
  });
})();