<div id="wrapper">
  <h1 id="title" class="justify-this">
        <span class="row">First row</span><br />
        <span class="row">Another row</span><br />
        <span class="row">One third and long row</span><br />
        <span class="row">The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog</span>
    </h1>
</div>
#wrapper > #title {
  width: 80%;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
  margin: 0 auto;
  color: #e3584d;
  text-shadow: 0 1px 1px #fff;
  padding: 0;
}
function resizeFont(elemToR) {
  var parentW = elemToR.offsetWidth;

  $(elemToR).find('.row').each(function(n) {
    var newFontSize = (parentW / this.offsetWidth) * 9.9;

    this.style.fontSize = newFontSize + 'px';
    this.style.lineHeight = '100%';
  });
}

$(document).ready(function() {
  $('.justify-this').each(function() {
    resizeFont(this);
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js