CodePen

HTML

            
              <h1 class="text">
  <span>Row one text</span>
  <span>SECOND</span>
  <span>You can always have a lot of content</span>
</h1>

<h1 class="text">
  <span>Sometimes I do</span>
  <span>Things</span>
</h1>

<h1 class="text">
  <span>And by accident</span>
  <span>it's something</span>
  <span>COOL</span>
</h1>

<h1 class="text">
  <span>You're not alone</span>
  <span>in this lonely</span>
  <span>WORLD</span>
</h1>

<h1 class="text">
  <span>Mozilla Firefox</span>
  <span>Google Chrome</span>
  <span>Windows Internet Explorer</span>
  <span>Opera Browser</span>
  <span>Apple Safari</span>
</h1>
            
          
!

CSS

            
              body {
  text-align: center;
}

h1.text {
  display: inline-block;
  font-size: 1em;
  margin: 1em;
  padding: .25em;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

h1.text span {
  display: block;
  font-size: 1em;
}

h1.text:hover {
  background: red;
  color: white;
}

h1.text:nth-of-type(1) {
  font-family: serif;
}

h1.text:nth-of-type(2) {
  font-family: sans-serif;
}

h1.text:nth-of-type(3) {
  font-family: 'Segoe UI', 'Helvetica';
}

h1.text:nth-of-type(4) {
  font-family: 'Lucida Console', monospace;
}

h1.text:nth-of-type(5) {
  left: 50%;
  top: 50%;
  opacity: .3;
  position: absolute;
  transform: rotate(-45deg) scale(2);
  transform-origin: 100% 100%;
  z-index: -1;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript
// this version here is adjusted to be more dynamic
(function($) {
  
  $.textMetrics = function(el) {
    
    var tm = document.createElement('span'),
      $tm = $(tm);
    $tm.css({
      border: 0,
      padding: 0,
      position: 'absolute',
      visibility: 'hidden'
    });
    
    tm.appendChild(
      document.createTextNode(el.textContent || el.innerText)
    );
    
    el.appendChild(tm);
    var rect = tm.getClientRects()[0];
    $tm.remove();
    
    return {
      height: rect.bottom - rect.top,
      width: rect.right - rect.left
    };
  }
  
})(jQuery);

// custom implementation
$(function(){
  $('h1.text').each(function(){
    var widths = [], maxwidth = 0, width = 0;
    $(this).children('span').each(function(){
      width = $.textMetrics(this)['width'];
      widths.push({el: this, width: width});
      if(maxwidth < width) maxwidth = width;
    });
    widths.forEach(function(w,i){
      $(w.el).css({
        'font-size': (w.width > 0 ? maxwidth / w.width : 0).toFixed(5) + 'em'
      });
    });
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................