浏览器空白渲染

Question

最近我正在编辑别人的代码，我注意到空格的用法如下：

<div>Some text &nbsp; &nbsp; &nbsp; Some other text</div>

我自然认为浏览器会合并额外的空格，所以这实际上只有四个空格。虽然测试了这个 - 它实际上是7个空格（至少在chrome中）！这是因为浏览器同时渲染空间和 nbsp;空格。

所以我的问题是，浏览器什么时候会渲染空白区域？换句话说，什么时候渲染单个空格字符而忽略？

JSFiddle演示： http://jsfiddle.net/L7x7t/3/

Answer 1

浏览器仅折叠连续的常规空格字符。文本呈现主要由CSS规范而不是HTML规范（具有例外）控制;关于空白崩溃，section 16.6.1 of CSS2.1有详细信息。具体做法是：

  

在另一个空格（U + 0020）之后的任何空间（U + 0020） - 即使是内联之前的空格，如果该空间也将“白色空间”设置为“正常”，“现在”或“预先行” ' - 被删除。

由于有一个不间断的空格将每两个空格字符分开，否则它们将是连续的（并且不间断的空格不被视为“常规”空格字符），浏览器没有机会折叠它们中的任何一个，所以必须按顺序渲染所有这些。

除a nasty bug in Chrome regarding the part about "a space before the inline"外，浏览器的行为大致相同。

Answer 2

据我所知，规则很简单：每个接一个的多个白色空间总是呈现为1个空白区域。如果要渲染更多内容，则需要使用 实体。

所以如果你有代码（[whitespace]在这里是标准的空格）

[whitespace][whitespace]

浏览器只渲染一个空格

但是当你有

时

[whitespace] [whitespace]

浏览器将呈现3个空格，因为正常的空格由额外的 

分隔

此规则不适用于实体版本，因此如果您有

  

将生成2个空格

Answer 3

来自W3C建议书：

<强> 4.7。属性值中的空格处理

当用户代理处理属性时，他们会根据[XML]的第3.3.3节

执行此操作

剥离前导和尾随空格。 将一个或多个空格字符（包括换行符）的序列映射到单个字间空间。 对于标签之间的空白，请参阅3.2标准9：

部分

<强> 3.2。用户代理一致性

[1-8 snipped]

1. 根据以下规则处理空白区域。以下字符在[XML]空格字符中定义：

空间（） 水平表（） 运输退货（＆＃13;） LINE FEED（ ） XML处理器规范化不同的系统＆＃39;将行结束代码整合到一个LINE FEED字符中，该字符将传递给应用程序。

用户代理必须使用CSS中的定义来处理空白字符[CSS2]。请注意，CSS2建议未明确解决非拉丁字符集中的空白处理问题。这将在CSS的未来版本中解决，此时将更新此引用。

另见C.15节：

<强> C.15。 HTML与XML中的空格字符

某些在HTML文档中合法的字符在XML文档中是非法的。例如，在HTML中，Formfeed字符（U + 000C）被视为空格，在XHTML中，由于XML的字符定义，它是非法的。