CodePen

HTML

            
              <div class="holder">
<div class="poem init">
  ”It is only in sorrow bad weather masters us; in joy we face the storm and defy it"
</div>
  <p class="author">— Amelia Bar</p>
</div>
  
            
          
!

CSS

            
              .holder {
width: 500px;  
margin: 100px auto;  
}

.poem  span {
  
  font-family: sans-serif;
  font-size: 2em;
  text-transform: uppercase;
  font-weight:800;
  line-height:1.2em;
 
}
 
.init{padding: 0 27px}   
.extra{
  padding: 0px 8px;
  margin: 2px 5px;
  background-color:gray;
  display:inline-block;
  color:pink;
}

.author {color:gray; font-family: sans-serif; display:none; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var lineSystem={} 

$(document).ready(function() {
	$('.poem').wraplines();
  var opts = $('.poem').data();
  
  $('.poem  span').addClass('extra');
  $('.poem').removeClass('init');
  
  $("span").each(function(index) {  $(this).fadeOut(0).delay(400*index).fadeIn(300);
});
  $(".author").delay(2000).fadeIn();
});


















/*
 * jQuery wraplines plugin
 *
 * Copyright (c) 2010 Paul Bennett (http://pmbennett.net)
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 */

jQuery.fn.wraplines = function(options) {
	var options = jQuery.extend({
		lineWrap: 'span', //name of html element used to wrap lines
		lineClassPrefix: 'wrap_line_', // prefix for class name to be added to line wrapper element
		wordClassPrefix: 'w_line_',
		index: 0,
		offsetTop: 0,
		offsetLeft: 0
	}, options);
	return this.each(function() {
		options.index  = 0;
		options.offset = 0;
		var parentElm = $(this);
		var elmText = $(parentElm).text();
		$(parentElm).html(function(ind, htm) {
			var $repText = '<' + options.lineWrap + '>' + elmText.replace( /\s/g, '</' + options.lineWrap + '> <' + options.lineWrap + '>');
			$repText = $repText + '</' + options.lineWrap + '>';
			return $repText;
		});
		$(options.lineWrap, parentElm).each(function() {
			var spanOffset = $(this).offset();
			if (spanOffset.top > options.offsetTop) {
				options.offsetTop = spanOffset.top;
				options.index++;
			}
			$(this).addClass(options.wordClassPrefix + options.index);
		});
		for (var x = 1; x <= options.index; x++) {
			$('.' + options.wordClassPrefix + x, parentElm)
			.wrapAll('<' + options.lineWrap + ' class="line ' + options.lineClassPrefix + x + '" />')
			.append(" ");
			var innerText = $('.' + options.lineClassPrefix + x, parentElm).text();
			$('.' + options.lineClassPrefix + x, parentElm).html(function() {
				return innerText;
			});
		lineSystem.index=options.index
    
    }
	});
};
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................