多个空格如何在 HTML 中显示，没有 pre、nbsp 或 white-space: pre？答案

【问题标题】：How are multiple spaces showing in HTML, without pre, nbsp or white-space: pre?多个空格如何在 HTML 中显示，没有 pre、nbsp 或 white-space: pre？
【发布时间】：2012-11-22 14:29:33
【问题描述】：

我敢肯定这是不可能的。不知何故，我的 HTML 标记中的段落中的多个空格没有折叠。它们是 not &nbsp;，not 在 <pre> 标记中，not 设置为 white-space: pre-wrap; 或 white-space: pre;，并且行为是不通过在元素上强制 style="white-space: normal;" 进行更改。

我的理解是，只有这三种方法可以保留空白，并且可以在 HTML 中显示两个或多个空格。

所以问题是：还有什么可能导致连续空格显示为多个空格？肯定有其他的东西——但在我知道它是什么之前我无法找到它，而且我找到的每个来源都只是谈论&nbsp;、<pre> 和white-space: pre-wrap; 或white-space: pre;

键编辑：我尝试使用 Firebug 删除一些有问题的空格并重新输入。当从键盘删除并重新输入时，空格的行为正常 - 浏览器中没有意外的空格。所以它必须是一些在视图源、文本编辑器等中显示为纯空格的字符，但实际上表现得像&nbsp;。它可能是什么，至关重要的是，我如何识别它以将其删除？违规输入的原始来源是所见即所得编辑器 TinyMCE，所以我要添加该标签...

更多细节：我有一些 HTML 包含包含多个空格的段落文本，就像这样（在 ...s 之间是直接从 Firefox 视图源复制的）：

<p> blah blah.... nothing  more  than  a ... blah blah </p>

如您所见，这些是常规空格，而不是&nbsp;。该文档在其他地方有&nbsp;，它们在视图源中显示为这样，所以它们不是&nbsp;s 以某种方式伪装成源中的正常空格。

另外，CSS 没有设置为 white-space: pre; 或类似的东西：

Firebug 的“计算”面板未列出与空格相关的规则。
在段落上强制使用white-space: normal; 对空格没有影响。该规则确实显示在 Firebug 的“已计算”面板中，因此它正在应用。
将white-space: pre-wrap; 应用于段落会导致其他更改，但不会更改这些多个连续空格。例如，它会在选定文本段落中的每个换行符的末尾显示一个额外的空格。所以它绝对不会被悄悄地设置为white-space: pre-wrap;

文档中的任何地方都没有<pre>标签。在源代码中的<pre 上查找一无所获。

因此它应该在浏览器中显示，每个单词之间有一个空格。它没有。它显示多个空格，就好像它是<pre> 或&nbsp; 或white-space: pre;。但这些都不是。

必须有一些其他的方法来获得类似white-space: pre; 的效果，我不知道。还有哪些其他方法可以预先格式化空格并阻止多个空格折叠？这可能是什么原因造成的。

一些背景说明：

在哪些浏览器中见过？ Firefox 16.0.2、Google Chrome 23.0.1271.95 m (Windows)
如果您不希望标记可见，为什么要在标记中使用双倍空格？ 我正在为 CMS 进行前端/设计工作，用户将通过以下方式从 Word 和 PDF 中输入文本TinyMCE 所见即所得（不可协商）。因此，标记将是混乱的。修复 CMS 文本格式化程序以清除空格和清除标记超出了本工作的范围。
文档类型？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML+RDFa 1.1//EN">
您确定有多个空格？当然，您可以在浏览器前端的单词之间选择一个、两个，有时是三个空格。
我可以查看所有代码吗？ 抱歉，这是一个预发布网站，不公开。随意询问特定的 CSS 规则、HTML 标记、加载的 javascript 内容等。

【问题讨论】：

这看起来很傻。如果 HTML 没有按预期工作，则需要几秒钟才能看到发生了什么。给我们看一个例子。给我们一个网址。
@user568458 你能把文本部分放在 jsfiddle 中吗？
@JonathanWood 这确实看起来很傻，但我已经在原帖中回答了你的评论。 blah blah 位中的那些空格是直接从视图源复制的，我解释了为什么我不能在最后一个项目符号中放入 URL。
我猜这些不是常规的空格。也许有些制表符会让你认为它有几个空格，但实际上它实际上只有一个空格字符。
@SajjanSarkar 原则上是的，但是无论我是从源复制还是从浏览器前端复制，经过jsfiddle输入和处理后，它们的行为都正常。另请参阅我的编辑 - 你说得对，它肯定是关于空格字符的，但我想不出一种方法来找出空格字符真的是什么.

标签： html css text tinymce whitespace

【解决方案1】：

我猜你的源代码中冒犯的空格字符不是SPACE (U+0020)，但实际上是NO-BREAK SPACE (U+00A0)。从视觉上看，它们看起来相同，但如果您在十六进制编辑器中查看源代码（显示文件中的各个字节），您会看到这些字符的不同编码。

编辑 1

此 PHP 代码应查找违规字符并将其替换为常规空格：

$strNoBreakSpace = mb_convert_encoding('&#x00A0;', 'UTF-8', 'HTML-ENTITIES');
$strNormalSpace  = mb_convert_encoding('&#x0020;', 'UTF-8', 'HTML-ENTITIES');

$strInput = str_replace( $strNoBreakSpace, $strNormalSpace, $strInput );

编辑 2

创建两个空格字符的更简单方法：

$strNoBreakSpace = json_decode('"\u00A0"');
$strNormalSpace  = json_decode('"\u0020"');

【讨论】：

完全正确 - 我的文本编辑器中的“第二个空格”显示为两个 . onlinehexeditor.com 中的字符 - 0xc2 后跟 0xa0，根据 utf8-chartable.de/… 表示 unicode 字符点 U+00A0。谢谢 - 我以为我要疯了（从非 unicode 流利的读者的许多反对意见来看，其他人显然也认为我要疯了......）
反对票不公平 - 您提出了一个很好的问题并提供了大量信息，这确实有助于缩小问题的根源。
谢谢 :) 这是 StackOverflow，所以我猜反对票是因为问题有 not enough jQuery ;)