замена пробелов на & nbsp;

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

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

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

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

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

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

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

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

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

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

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

Ответы на вопрос(4)

$('p').contents().filter(function(){
    return this.nodeType == 3 // Text node
}).each(function(){
    this.data = this.data.replace(/ /g, '\u00a0');
});

DEMO

Даже тоjQuery действительно хорош и все делает, CSS также может работать в некоторых случаях:

white-space: pre-wrap;

Demo.

Связано с CSS3:text-space-collapse

<pre> </pre>лемент @, чтобы сделать пробелы видимыми. Это быстрое решение, если вы хотите визуально отобразить, скажем, ascii art.

почему существует такая ошибка с этим многострочным / однострочным дисплеем: inline-block ;? (См. Ссылку на скрипку выше и изучите ...)

Рассмотреть возможность

​<p><span style="display:inline-block">lorem </span>​​​​​​​​​​​​​​​​​​<span>ipsum</span></p>

Пробел символ Внутри контейнер строки, созданныйdisplay:inline-block. CSS 2,1 16.6.1 описывает, как должны обрабатываться пробелы в линейном блоке:

Поскольку каждая строка размечена… [i] fa space (U + 0020) в конце строки имеет «пробел», установленный на «normal», «nowrap» или «pre-line», это… удален.

Поскольку пробел находится в конце строки Внутри встроенный блок, он удален.

Contrast:

<p><span style="display:inline-block">lorem</span> <span>ipsum</span></p>​

В этом случае пробел не удаляется, потому что он находится между двумя элементами на уровне строки, которые составляют одну строку.

ВАШ ОТВЕТ НА ВОПРОС