placeholder中空格被压缩为一个是因为white-space:normal的HTML标准行为；应使用 或\u00A0（框架中）实现多空格，禁用white-space或pre等无效方案。
placeholder 属性里直接敲空格，浏览器会合并成一个——这是最常踩的坑。
为什么 placeholder 里的空格总被压成一个
HTML 规范规定：所有元素的文本内容（包括 placeholder）默认启用 white-space: normal，连续空白符（空格、制表、换行）全被压缩为单个空格，首尾空白也被忽略。这不是 bug，是标准行为。
所以 <input placeholder="搜索 商品"> 实际渲染出来是 “搜索 商品”（中间只一个空格）。
最稳妥：用 替代空格
是 HTML 实体，代表 non-breaking space，浏览器不会合并它，也不会在它位置折行，兼容性覆盖 IE6+ 所有主流环境。
立即学习“前端免费学习笔记（深入）”；
- 要显示两个空格：写成
搜索 商品 - 三个空格：
搜索 商品 - 别漏掉
&符号——写成nbsp;或 都无效 - 不要混用：比如
搜索 商品，中间那个普通空格仍会被压缩
框架里（React/Vue）得用 \u00A0
JSX 和 Vue 模板不解析 HTML 实体， 会被当纯字符串字面量输出，页面上直接显示文字 “ ”。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
必须用 Unicode 转义：
- React：
<input placeholder={"搜索\u00A0\u00A0商品"} /> - Vue（模板表达式）：
<input :placeholder="'搜索' + '\u00A0\u00A0' + '商品'"> - 注意：不是
"\u0020"（那是普通空格，照样被压缩），必须是\u00A0
别碰 white-space 或 <pre>
placeholder 是伪元素（::placeholder），CSS 无法通过父元素的 white-space 控制它；给 input 加 white-space: pre 也无效，因为该样式不作用于伪元素内容。
<pre> 标签完全不适用于 placeholder 场景——它只能包裹可见文本，不能注入到属性值里。
强行用 text-indent 或 letter-spacing 模拟空格，会导致所有字符间距异常，且响应式下容易错位，属于绕远路还易翻车。
真正卡住人的往往不是“怎么加空格”，而是没意识到 placeholder 的内容走的是 HTML 文本解析流程，和普通标签内文本一样受空白合并规则约束；再加上框架里实体不生效这个二次陷阱，两处一叠加，空格就悄无声息地消失了。
