substituindo espaços por & nbsp;

Vamos supor o seguinte elemento (procure pelos espaços à direita e à esquerda):

<code><p>
    <span class="item">Lorem Ipsum is simply dummy text </span><span class="item">of the printing and typesetting</span><span class="item"> industry.</span>
</p>
</code>

Eu quero substituir todos os espaços com&nbsp;, devido adisplay: inline-block comportamento estranho mostrado aqui:http://jsfiddle.net/SQuUZ/ (não sei sobre todos os navegadores, mas os últimos Chrome e Firefox agem da mesma forma).

Agora, desde que o javascript é uma opção aqui, então é jQuery, eu poderia:

<code>$('p').text($('p').text().replace(/ /g, '&nbsp;'));
</code>

Mas escapa do&nbsp; e se transforma ema&nbsp;mess&nbsp;of&nbsp;entities.

Obviamente, para tais propósitos, poderíamos usar$('p').html():

<code>$('p').html($('p').html().replace(/ /g, '&nbsp;'));
</code>

Mas este é ainda pior, porque também adiciona&nbsp; dentro das próprias tags:

<code><p>
    <span&nbsp;class="item">Lorem&nbsp;Ipsum&nbsp;is&nbsp;simply&nbsp;dummy&nbsp;text&nbsp;</span><span&nbsp;class="item">of&nbsp;the&nbsp;printing&nbsp;and&nbsp;typesetting</span><span&nbsp;class="item">&nbsp;industry.</span>
</p>

<!-- TL;DR -->
<span&nbsp;class="item"></span> <!-- is actually invalid... -->
</code>

E isso quebra tudo ...

Notas:Não haverá apenas<span> elementos com classeitem dentro do recipiente (que também pode não ser sempre<p>).Expressões regulares lentas são uma opção (o problema é que não consigo criar uma ...).

Quais opções eu tenho aqui?

Atualizar:

Na verdade, alguém poderia explicar por que existe tal bug com aquela linha multi-linha / únicadisplay: inline-block;? (Veja link de violino acima e examine ...)

Pergunta migrada paradisplay: bloco inline; comportamento de espaçamento estranho

questionAnswers(4)

yourAnswerToTheQuestion