Załóżmy następujący element (poszukaj spacji końcowych i spacji wiodących):

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

Chcę zastąpić wszystkie przestrzenie , spowodowanydisplay: inline-block dziwne zachowanie pokazane tutaj:http://jsfiddle.net/SQuUZ/ (nie wiem o wszystkich przeglądarkach, ale najnowsze Chrome i Firefox działają tak samo).

Teraz, ponieważ javascript jest tutaj opcją, więc jQuery, mogłem:

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

Ale ucieka  i okazuje sięa mess of entities.

Oczywiście do takich celów możemy użyć$('p').html():

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

Ale ten jest jeszcze gorszy, ponieważ dodaje  wewnątrz samych znaczników:

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

I to wszystko łamie ...

Uwagi:Nie będzie tylko<span> elementy z klasąitem wewnątrz kontenera (co może nie zawsze być<p>).Powolne wyrażenia regularne to opcja (problem polega na tym, że nie mogę wymyślić jednego ...).

Jakie mam tutaj opcje?

Aktualizacja:

W rzeczywistości, czy ktokolwiek mógłby wyjaśnić, dlaczego jest taki błąd w tej wieloliniowej / pojedynczej liniidisplay: inline-block;? (Patrz link skrzypiec powyżej i sprawdź ...)

Pytanie przeniesione dowyświetlacz: blok śródliniowy; dziwne zachowanie w odstępach