为何浏览器忽略HTML中ASCII艺术的空格？正常文本却不受影响

HTML在渲染文本时遵循**空白折叠（Whitespace Collapsing）**规则：

• 多个连续的空格、制表符、换行符会被自动合并成单个空格
• 文本开头和结尾的空白会被直接忽略

ASCII艺术完全依赖精确的空格位置来构建图形结构，这种自动折叠规则会直接破坏它的排版逻辑，导致渲染效果不符合预期。而普通文本本身不需要精准的空格布局，空白折叠不会影响正常阅读，所以不会出现类似问题。

如果要修复这个问题，有几种常用方式：

• 用 <pre> 标签包裹ASCII艺术内容：<pre> 会完整保留原始的空格、换行等格式，完全按照代码里的排版渲染
• 把空格替换成  （非换行空格），强制保留每个空格，但这种方式相对繁琐
• 给容器元素设置CSS属性 white-space: pre;，作用和<pre>标签类似，样式调整更灵活

内容的提问来源于stack exchange，提问作者Akut Luna