title: Each word in a title on their own line HTML/CSS
body: <p>I have some dynamic titles where the design requires each word to be on their own line. Here is the desired look:
  <a href="http://jsfiddle.net/alanweibel/2LEmF/2/" rel="nofollow">http://jsfiddle.net/alanweibel/2LEmF/2/</a> (note the black backgrounds for each word)</p>
  
  <p>The problem I need help with is keeping the style above while having the whole title inside of one tag. I cannot dynamically insert H1's before and after each word.</p>
  
  <p>I need to change the HTML markup from</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="tagline"&gt;
  &lt;h1&gt;
      Oh
  &lt;/h1&gt;
  &lt;h1&gt;
      Look
  &lt;/h1&gt;
  &lt;h1&gt;
      A
  &lt;/h1&gt;
  &lt;h1&gt;
      Headline
  &lt;/h1&gt;
  &lt;h1&gt;
      Thanks
  &lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>to something similar to</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="tagline"&gt;
      &lt;h1&gt;
          Oh Look A Headline Thanks
      &lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>while keeping the same style as in the link above.</p>
  
  <p>Thanks in advance.</p>