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, '&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; weird spacing behavior

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 is really great and does all things ，CSS在某些情况下也可以起作用：

white-space: pre-wrap;

<强> Demo

CSS3相关：text-space-collapse

Answer 3

任何人都可以解释为什么多行/单行显示存在这样的错误：内联块;？（参见上面的小提琴链接，并检查......）

考虑：

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

空格字符是里面由display:inline-block创建的行框容器。 CSS 2.1 16.6.1描述了必须如何处理行框中的空格：

当每一条线都布置好了...... [i]在一条线末端的空间（U + 0020）将“白色空间”设置为“正常”，“现在”或“前线”，它被删除了。

由于空格位于内部内联块的末尾，因此会将其删除。

对比：

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

在这种情况下，空格不会被删除，因为它位于构成单个行框的两个内联级元素之间。

Answer 4

您可以使用<pre> </pre>元素使空格可见。它是一个快速的解决方案，如果你想要视觉显示，让我们说，ascii艺术。

用。替换空格

注意：

更新

4 个答案: