浏览器会压缩表单控件中的连续空格为单个空格，这是HTML规范行为； 在input属性值中不解析，仅适用于HTML文本内容；保留多空格需用JS直接设置value或textarea手动输入。
直接敲空格键无效，浏览器会合并
你在 <input> 或 <textarea> 里敲十下空格，提交后看到的值里可能只剩一个——这不是 bug，是 HTML 规范行为。浏览器在解析文本内容时，会把连续空白字符（空格、换行、制表符）压缩成单个空格，并忽略首尾空白。表单控件也不例外，value 属性和用户输入流都受此规则影响。
在表单中不生效，别硬塞
是用于 HTML 文本渲染的实体，它只在元素内容（如 <p>Hello World</p>）中起作用。但你不能把它写进 <input value="a b"> 的属性值里——浏览器不会解析属性里的 HTML 实体，最终 value 就是字面字符串 a b，而不是两个空格。
常见错误现象：
- 在 Vue/React 中用
v-model或v-bind:value绑定含 - 服务端返回 JSON 字段含
"name": "A B"，前端直接赋给input.value，页面显示原样字符
真正能保留连续空格的三种方式
要让表单控件「显示并提交」多个空格，必须绕过浏览器的空白压缩逻辑，核心思路是：不让空格走“文本渲染路径”，而是走“原始值路径”。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 对
<textarea>：用white-space: pre-wrap+ 用户手动输入（回车+空格），或 JS 动态设置textarea.value = "A B"（注意：这里两个空格是真实 Unicode U+0020，不是实体） - 对
<input type="text">：只能靠 JS 控制input.value，例如el.value = "foo" + " ".repeat(3) + "bar"；用户无法靠键盘输入保留，因为输入时浏览器已压缩 - 提交前处理：后端接收时，若需严格保留空格，应校验
request.body原始字节流（如 Node.js 的req.rawBody或 Python 的request.get_data()），而非依赖框架自动解析后的字符串（多数框架会 trim 或 normalize 空白）
CSS white-space 对表单控件几乎没用
给 <input> 设置 style="white-space: pre;" 完全无效——这个 CSS 属性对替换元素（replaced element）如 input、img 不起作用。只有 <textarea> 和普通块级元素（如 <p>）才响应 white-space。
容易被忽略的一点：<textarea> 的初始值如果来自 HTML 属性（<textarea>A B</textarea>），里面的两个空格会被保留，因为 textarea 的内容是“可编辑文本节点”，不参与 HTML 实体解析；但一旦用 JS 改写 textContent 或 innerHTML，就得小心转义问题——比如 el.innerHTML = "A B" 会插入实体字符，而非空格。
