Textfit

HTML

<div class="container">
  <div class="textfit">
    Hallo ich bin ein asdasdasdasd asd asd sfafa sdfasdfasfas asfasdf asdf af
  </div>


</div>

CSS

.container {
  width: 300px;
  padding: 4px 16px 4px 16px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

div {
  background-color: red;
  color: #fff;
}

.textfit {}

.fittext-inner {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid blue;
}

JavaScript

function textfit() {

  $('.textfit').each(function() {
    $(this).wrapInner('<div class="fittext-inner"></div>');
    var fontSize = parseInt($(this).css('font-size'), 10),
      containerWidth = $(this).outerWidth(),
      innerWidth = $(this).find('.fittext-inner').outerWidth(),
      newfontSize = (containerWidth * fontSize) / innerWidth,
      maxFont = $(this).data('textfit-max'),
      minFont = $(this).data('textfit-min'),
      adjust = $(this).data('textfit-adjust');

    if (adjust) {
      var newfontSize = newfontSize * adjust;
    }
    if (newfontSize > maxFont) {
      var newfontSize = maxFont
    } else if (newfontSize < minFont) {
      var newfontSize = minFont
    }
    $(this).css('font-size', newfontSize + 'px').find('.fittext-inner').contents().unwrap();
  });
}

textfit();


$(window).resize(function() {
  textfit();
});