HTML DOM：回车/制表符是否转换为空格？答案

【问题标题】：HTML DOM: do carriage returns/tabs translate to spaces?HTML DOM：回车/制表符是否转换为空格？
【发布时间】：2021-06-03 21:46:41
【问题描述】：

请看这张图片：

在左上角，注意HelloWorld 之间没有空格，而Foo Bar 有。右侧显示标记； Foo 之后或Bar 之前没有空格；只是一个回车和几个标签。左下角显示了 DOM 是什么（每个 Firebug）。

问题：Foo 和 Bar 之间有什么空格？

注意：这是在 JSFiddle 上，但似乎已将制表符转换为空格：http://jsfiddle.net/sM6rk/

原始标记（同样，制表符变成了空格）：

<html>
    <head>
    </head>
    <body>
        <p>Hello<em>World</em></p>
        <p>Foo
            <em>Bar</em>
        </p>
    </body>
</html>

【问题讨论】：

查看 Chrome Inspector 对 DOM 的表示 - i51.tinypic.com/106kcw5.png 可能会有所帮助，因为您可以看到文档中仍然存在空格，然后按照下面的说明进行格式化

标签： html firebug dom

【解决方案1】：

CSS 规范解释了white-space processing model 的表示，具体来说：

[..snip..]

[..snip..]

如果 'white-space' 设置为 'normal' 或 'nowrap'，则换行字符将转换为以下字符之一：空格字符、零宽度空格字符 (U+200B) 或无字符（即未渲染），根据基于内容脚本的 UA 特定算法。

如果“white-space”设置为“normal”、“nowrap”或“pre-line”，每个制表符 (U+0009) 都转换为空格 (U+0020) 在另一个空格 (U+0020) 之后的任何空格 (U+0020) — 甚至是内联之前的空格，如果该空格也将 'white-space' 设置为 'normal'、'nowrap' 或 'pre-line' - 是已删除。

【讨论】：

我的问题是一个标记问题，不是吗？或者它也是一个样式表问题？
如果这是一个标记问题，那么答案在我的评论中解释，其中 Chrome 显示源中的所有空白仍然存在于 DOM 中。如果这是一个关于为什么所有空白在屏幕上显示为单个空间的问题，那么这是一个演示问题，我在此处引用的 CSS 规范回答了这个问题:)

【解决方案2】：

在 HTML 中，所有空格都被转换为单个空格（或任何与语言等效的空格），除非它位于标记为 preserve-whitespace 的块内。这包括空格、制表符和换行符。

更具体的细节请见The HTML 4.01 spec。

【讨论】：

【解决方案3】：

是的，所有空白字符都被解释为空格，多个空白字符被解释为一个空格。

因此，Foo 和 Bar 之间的换行符和空格被解释为一个空格。

【讨论】：