title: Wrap each line of a paragraph in a span
body: <p>I am trying to create the style here <a href="http://codepen.io/timprint/pen/dumjF" rel="nofollow noreferrer">http://codepen.io/timprint/pen/dumjF</a> . I'm 99% sure this isn't possible with just CSS but if I can figure out how to wrap each line of the span with another element (another span? it doesn't really matter) I should be able to do it fairly easily. This is a responsive site so I don't have control of the line ends.</p>
  
  <p>I have paragraphs with inline spans.</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the
  human eye &lt;span class="highlight"&gt;He's got style, a groovy style, and a car
  that just won't stop. When the going gets tough, he's really rough, with a
  Hong Kong Phooey chop. Hong Kong Phooey, number one super guy.&lt;/span&gt; Hong Kong
  Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!&lt;/p&gt;`
  </code></pre>
  
  <p>I would like to wrap each line of .highlight in a secondary span and give the first and last ones a class .first &amp; .last. It needs to recalculate and reapply the spans if the window width changes.</p>
  
  <p>There could be several of these on a page so I need some way of reusing it.</p>
  
  <p><a href="https://stackoverflow.com/questions/15960653/obtain-a-line-of-a-paragraph-in-html">Obtain a line of a paragraph in HTML</a> is the closest I can find but I'm struggling to modify it for this use.</p>