浏览器合并连续空格是html规范默认行为，非bug；需用white-space: pre-wrap保留空格与换行并允许折行，配合overflow-x: auto防溢出，避免滥用导致响应式与可访问性问题。

空格被浏览器合并是默认行为，不是 bug

HTML 解析器会把连续的空格、制表符、换行符全压缩成一个空格，这是规范行为，不是渲染异常。所以写十个空格键，<p>hello          world</p> 最终只显示一个间隙。想靠敲空格控制布局，从源头就走不通。

用 white-space: pre-wrap 保留但不撑破

需要多空格原样显示（比如代码注释缩进、诗歌排版），又不能让长空格串撑开容器，pre-wrap 是最稳的选择：

• pre 会保留所有空白，但禁止自动换行，极易横向溢出
• pre-line 只保留换行，空格仍被合并，达不到“多个空格可见”效果
• pre-wrap 同时保留空格/换行，且允许内容在空格处正常折行，响应式友好

加一句 overflow-x: auto 防兜底，尤其对预格式化内容更安全。

别用   堆砌视觉空隙

用一堆   模拟缩进或对齐，短期能看，长期必翻车：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 字体变化时，  宽度浮动（中文字体下可能比英文字体宽一倍）
• 无法响应式收缩，固定像素感强，移动端容易错位
• 语义混乱，屏幕阅读器会逐个读出“不间断空格”，影响可访问性

真要控制间距，优先用 margin-left 或 padding-left —— 它们不参与文本流，不触发空白合并逻辑，宽度稳定可控。

表格里空格撑列宽？先查是不是 word-break 没设

表格单元格里一段带空格的长文本（比如 URL 或 base64）没换行，常是因为浏览器把它当“不可分割单词”处理了。这时单靠 white-space 不顶用，得配 word-break: break-all 或 overflow-wrap: break-word：

• word-break: break-all 允许任意字符间断行，适合纯技术字段
• overflow-wrap: break-word 更保守，只在必要时断词，可读性更好
• 两者都得配合 white-space: normal，否则 nowrap 会锁死换行

空格本身不撑布局，撑破的从来都是没被正确截断的长内容——问题不在空格，而在断行策略缺失。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！