title: replacing spaces with &nbsp;
body: <p>Let's assume the following element (look for the trailing and leading spaces):</p>
  <pre><code>&lt;p&gt;
      &lt;span class=&quot;item&quot;&gt;Lorem Ipsum is simply dummy text &lt;/span&gt;&lt;span class=&quot;item&quot;&gt;of the printing and typesetting&lt;/span&gt;&lt;span class=&quot;item&quot;&gt; industry.&lt;/span&gt;
  &lt;/p&gt;
  </code></pre>
  <p>I want to replace all spaces with <code>&amp;nbsp;</code>, due to <code>display: inline-block</code> weird behavior shown here: <a href="http://jsfiddle.net/SQuUZ/" rel="nofollow noreferrer">http://jsfiddle.net/SQuUZ/</a> (I don't know about all browsers, but latest Chrome and Firefox both act the same).</p>
  <p>Now, since javascript is an option here, so is jQuery, I could:</p>
  <pre><code>$('p').text($('p').text().replace(/ /g, '&amp;nbsp;'));
  </code></pre>
  <p>But it escapes the <code>&amp;nbsp;</code> and turns out into <code>a&amp;nbsp;mess&amp;nbsp;of&amp;nbsp;entities</code>.</p>
  <p>Obviously, for such purposes we could use <code>$('p').html()</code>:</p>
  <pre><code>$('p').html($('p').html().replace(/ /g, '&amp;nbsp;'));
  </code></pre>
  <p>But this one is even worse, because, it also adds <code>&amp;nbsp;</code> within the tags themselves:</p>
  <pre><code>&lt;p&gt;
      &lt;span&amp;nbsp;class=&quot;item&quot;&gt;Lorem&amp;nbsp;Ipsum&amp;nbsp;is&amp;nbsp;simply&amp;nbsp;dummy&amp;nbsp;text&amp;nbsp;&lt;/span&gt;&lt;span&amp;nbsp;class=&quot;item&quot;&gt;of&amp;nbsp;the&amp;nbsp;printing&amp;nbsp;and&amp;nbsp;typesetting&lt;/span&gt;&lt;span&amp;nbsp;class=&quot;item&quot;&gt;&amp;nbsp;industry.&lt;/span&gt;
  &lt;/p&gt;
  
  &lt;!-- TL;DR --&gt;
  &lt;span&amp;nbsp;class=&quot;item&quot;&gt;&lt;/span&gt; &lt;!-- is actually invalid... --&gt;
  </code></pre>
  <p>And it breaks everything...</p>
  <h3>Notes:</h3>
  <ul>
  <li>There won't only be <code>&lt;span&gt;</code> elements with class <code>item</code> inside the container (that may also not always be <code>&lt;p&gt;</code>).</li>
  <li>Slow regular expressions is an option (the problem is, I cannot come up with one...).</li>
  </ul>
  <p><strong>What options do I have here?</strong></p>
  <h3>Update:</h3>
  <p><strike>In fact, could anyone explain why there is such a bug with that multi-line / single-line <code>display: inline-block;</code>? (See fiddle link above, and examine...)</strike></p>
  <p>Question migrated to <a href="https://stackoverflow.com/questions/10474411/display-inline-block-weird-spacing-behavior">display: inline-block; weird spacing behavior</a></p>