Заменяя пробелы  

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

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

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

Теперь, поскольку javascript является вариантом здесь, так же как и jQuery, я мог:

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

Но он выходит из   и переходит в a mess of entities.

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

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

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

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

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

Примечания:

Внутри контейнера не будет <span> элементов с классом item (что также не всегда может быть <p>).
Медленные регулярные выражения - это опция (проблема в том, что я не могу придумать один...).

Какие параметры у меня есть?

Обновление:

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

Вопрос перенесен на display: inline-block; странное поведение расстояния

Ответ 1

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

DEMO

Ответ 2

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

white-space: pre-wrap;

Демо.

Связанный CSS3: text-space-collapse

Ответ 3

может кто-нибудь объяснить, почему существует такая ошибка с этим многострочным/однострочным дисплеем: 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", это... удален.

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

Контрастность:

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

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

Ответ 4

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