Nehmen wir das folgende Element an (achten Sie auf die nachgestellten und führenden Leerzeichen):

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

Ich möchte alle Leerzeichen durch ersetzen aufgrund vondisplay: inline-block seltsames Verhalten hier gezeigt:http://jsfiddle.net/SQuUZ/ (Keine Ahnung von allen Browsern, aber die neuesten Versionen von Chrome und Firefox funktionieren gleich).

Nun, da Javascript hier eine Option ist, könnte ich, ebenso wie jQuery,:

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

Aber es entgeht dem  und entpuppt sich alsa mess of entities.

Natürlich könnten wir für solche Zwecke verwenden$('p').html():

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

Aber dieser ist noch schlimmer, weil es auch hinzufügt  innerhalb der Tags selbst:

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

Und es bricht alles ...

Anmerkungen:Es wird nicht nur geben<span> Elemente mit Klasseitem im Behälter (das muss auch nicht immer sein)<p>).Langsame reguläre Ausdrücke sind eine Option (das Problem ist, ich kann mir keinen einfallen lassen ...).

Welche Möglichkeiten habe ich hier?

Aktualisieren:

Kann irgendjemand erklären, warum es einen solchen Fehler bei dieser mehrzeiligen / einzeiligen Verbindung gibt?display: inline-block;? (Siehe Link oben, und untersuchen ...)

Frage migriert nachAnzeige: Inline-Block; seltsames Abstandsverhalten