Предположим, что следующий элемент (ищем завершающие и ведущие пробелы):

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

Я хочу заменить все пробелы на , из-заdisplay: inline-block странное поведение показано здесь:http://jsfiddle.net/SQuUZ/ (не знаю обо всех браузерах, но последние версии Chrome и Firefox работают одинаково).

Теперь, поскольку здесь есть опция javascript, как и jQuery, я мог бы:

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

Но это ускользает от  и превращается вa mess of entities.

Очевидно, что для таких целей мы могли бы использовать$('p').html():

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

Но этот еще хуже, потому что он также добавляет  внутри самих тегов:

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

И это все ломает ...

Notes: There won't only be <span> elements with class item inside the container (that may also not always be <p>). Slow regular expressions is an option (the problem is, I cannot come up with one...).

What options do I have here?

Update:

In fact, could anyone explain why there is such a bug with that multi-line / single-line display: inline-block;? (See fiddle link above, and examine...)

Вопрос перенесен вдисплей: встроенный блок; странное расстояние