32

让我们假设以下元素（查找尾随和前导空格）：

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

&nbsp;由于display: inline-block此处显示的奇怪行为，我想用 替换所有空格：http: //jsfiddle.net/SQuUZ/（我不了解所有浏览器，但最新的 Chrome 和 Firefox 的行为相同）。

现在，由于 javascript 是这里的一个选项，jQuery 也是，我可以：

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

但它逃脱了&nbsp;并变成了a&nbsp;mess&nbsp;of&nbsp;entities。

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

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

但是这个更糟糕，因为它还&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;？（请参阅上面的小提琴链接，并检查...）

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

4

4 回答 4

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

演示

于 2012-05-06T20:46:49.227 回答
26

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

white-space: pre-wrap;

演示。

CSS3相关：text-space-collapse

于 2012-05-06T22:07:08.310 回答
3

谁能解释为什么多行/单行显示存在这样的错误：inline-block;？（请参阅上面的小提琴链接，并检查...）

考虑：

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

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

随着每一行的布局……[i]fa space (U+0020) 在行尾的“white-space”设置为“normal”、“nowrap”或“pre-line”，它被……删除.

由于空格位于inline 块内的行尾，因此将其删除。

对比：

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

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

于 2012-05-06T22:42:25.927 回答
2

您可以使用该<pre> </pre>元素使空格可见。如果您想直观地显示，比如 ascii 艺术，它是一个快速的解决方案。

于 2013-01-07T01:49:02.047 回答