浏览器空白渲染答案

【问题标题】：Browser white space rendering浏览器空白渲染
【发布时间】：2014-07-07 16:26:38
【问题描述】：

最近我正在编辑别人的代码，我注意到使用了类似以下的空格：

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

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

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

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

【问题讨论】：

【解决方案1】：

浏览器只会折叠连续的常规空格字符。文本渲染主要由 CSS 规范而不是 HTML 规范管理（有例外）；关于空格折叠，section 16.6.1 of CSS2.1 有详细信息。具体来说：

在另一个空格 (U+0020) 之后的任何空格 (U+0020) — 甚至是内联之前的一个空格，如果该空格也将 'white-space' 设置为 'normal'、'nowrap' 或 'pre-line ' - 被删除。

由于有一个不间断空格分隔每两个连续的空格字符（并且不间断空格不被视为“常规”空格字符），浏览器没有机会折叠其中任何一个，因此必须按顺序渲染它们。

【讨论】：

【解决方案2】：

据我所知，规则很简单：超过 1 个空格一个接一个总是被渲染为 1 个空格。如果要渲染更多，需要使用&nbsp;实体。

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

[whitespace][whitespace]

浏览器只呈现一个空格

但是当你有

[whitespace]&nbsp;[whitespace]

浏览器将呈现 3 个空白，因为普通空白被额外的 &nbsp; 分隔

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

&nbsp;&nbsp;

将生成 2 个空格

【讨论】：

【解决方案3】：

来自 W3C 推荐：

4.7。属性值中的空白处理

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

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

3.2.用户代理一致性

[1-8 剪断]

空格 ( ) 水平制表 ( ) 回车 ( ) 换行（ ) XML 处理器将不同系统的行结束代码标准化为一个单独的 LINE FEED 字符，然后传递给应用程序。

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

另见第 C.15 节：

C.15。 HTML 与 XML 中的空白字符

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

【讨论】：