浏览器默认将连续空格、制表符、换行符合并为一个空格并忽略首尾空白，这是html规范规定的空白折叠行为，而非bug；需用 实体或white-space css属性（如pre-wrap）来保留多个空格。
为什么直接敲空格不生效
浏览器默认把连续的空格、制表符、换行符合并成一个空格，甚至忽略首尾空白——这不是 bug，是 HTML 规范行为。你在代码里写 hello world，渲染出来永远是 hello world（中间只有一个空格）。
常见错误现象包括：表单标签对齐错位、价格文案“¥ 199”被拆到两行、按钮文字间距忽大忽小。
- 普通空格（ASCII 32）会被压缩，不能靠堆砌解决排版问题
-
- 全角空格（
什么时候该用 而不是 CSS
的核心价值是语义锁：它明确告诉浏览器“这里必须保持连贯，不准断行”。比如数字与单位、符号与年份、缩写人名等场景。
典型用例：
- 防止
10 kg在行尾变成 “10” 和 “kg” 分两行 - 避免
© 2026中的版权符号和年份被拆开 - 保留
P. T. Barnum中的点号结构
注意： 不是样式工具。如果只是想让“姓名：”和“张三”之间空两格，用 word-spacing 或 margin-left 更可控；字体缩放或响应式变化时， 的视觉宽度会浮动，而 CSS 可以绑定相对单位。
white-space 属性比堆 更可靠
当你要保留一整段带多空格/换行的文本（如日志、配置片段、命令行输出），硬塞一堆 和
<br>很容易失控。此时应交给 CSS 控制渲染逻辑。
关键取值对比：
-
white-space: pre-wrap：保留所有空格和换行，同时允许内容在容器边界自动软换行 —— 最常用、最安全的选择 -
white-space: pre：完全按源码格式渲染，不换行，容易撑破容器 -
white-space: pre-line：合并空格但保留换行，适合纯文本摘要类内容
示例：<p style="white-space: pre-wrap;">key: value</p> 会真实显示 4 个空格，且在窄屏下仍能折行。
textarea 输入后空格消失怎么办
用户在 <textarea></textarea> 里敲了 5 个空格，JS 读取 textarea.value 没问题，但一旦赋给 div.innerHTML，空格就只剩一个 —— 因为 innerHTML 触发了 HTML 解析器的空白合并规则。
解决路径很窄，但有效：
- 用
textContent替代innerHTML（但会转义 HTML 标签） - 读取后手动替换空格：
value.replace(/ /g, ' ')，注意只替换半角空格，避免误伤全角或 - 目标容器加
style="white-space: pre-wrap;"，然后直接设textContent，一劳永逸
真正难处理的是混合场景：用户输入含 、全角空格、\t 的文本，又需要保留原始语义。这时候别试图用正则全量清洗，优先考虑用 white-space: pre-wrap + textContent 组合守住底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
