title: Can I wrap each line of multi-line text in a span?
body: <p>I've been trying to figure out how to do this (if it's even possible) and have drawn a blank...</p>
  
  <p>I have some text that will wrap onto multiple lines. I want to detect each individual line, and wrap it in a span. Finally, I want to assign a class to each span from a looping array.</p>
  
  <p>For example...!</p>
  
  <pre><code>&lt;div id="quote"&gt;
      I have some text that
      wraps onto three lines
      in this container
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to get my jQuery to parse those lines, detect where it wraps, and turn it into this:</p>
  
  <pre><code>&lt;div id="quote"&gt;
      &lt;span class="red-bg"&gt;I have some text that&lt;/span&gt;
      &lt;span class="orange-bg"&gt;wraps onto three lines&lt;/span&gt;
      &lt;span class="yellow-bg"&gt;in this container&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The reason that I want to do this dynamically is that I'm doing it within responsive templates, so sometimes the same text will only wrap onto two lines, or maybe four in an iPhone.</p>
  
  <p>Is this doable? I've found this -> <a href="http://vidasp.net/tinydemos/numberOfLines.html" rel="nofollow noreferrer">http://vidasp.net/tinydemos/numberOfLines.html</a> which calculates the number of lines used in a block of text, but that doesn't really extend to do what I need.</p>