Asumamos el siguiente elemento (busque los espacios iniciales y finales):

<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>

Quiero reemplazar todos los espacios con , debido adisplay: inline-block comportamiento extraño que se muestra aquí:http://jsfiddle.net/SQuUZ/ (No sé sobre todos los navegadores, pero los últimos Chrome y Firefox actúan de la misma manera).

Ahora, ya que javascript es una opción aquí, también lo es jQuery, podría:

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

Pero se escapa de la  y se convierte ena mess of entities.

Obviamente, para tales fines podríamos utilizar$('p').html():

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

Pero este es aún peor, porque, también agrega  dentro de las propias etiquetas:

<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>

Y se rompe todo ...

Notas:No solo habrá<span> elementos con claseitem dentro del contenedor (que también puede no ser siempre<p>).Las expresiones regulares lentas son una opción (el problema es que no se me ocurre una ...).

¿Qué opciones tengo aquí?

Actualizar:

De hecho, ¿podría alguien explicar por qué hay un error de este tipo con esa línea multilínea / línea única?display: inline-block;? (Ver enlace de violín arriba, y examinar ...)

Pregunta migrada apantalla: bloque en línea; extraño comportamiento de espaciado