用 替换空格

Question

让我们假设以下元素(查找尾随和前导空格):

<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,但最新的Chrome和Firefox都行为相同).

现在,由于javascript是一个选项,jQuery也是如此,我可以:

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

但是它逃脱了 并且变成了a mess of entities.

显然,出于这样的目的,我们可以使用$('p').html():

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

但是这个更糟糕,因为它还 在标签内添加:

<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;？(参见上面的小提琴链接,并检查......)

问题迁移到显示:inline-block; 奇怪的间距行为

Answer 1

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

DEMO

Answer 2

即使是jQuery真的很棒并做所有事情,CSS在某些情况下也可以工作:

white-space: pre-wrap;

演示.

CSS3相关: text-space-collapse