HTML默认压缩连续空白字符为单个空格，解决搜索框placeholder多空格需用 （不可换行空格），必须带&和;，Vue/React中需转义为\u00A0，禁用全角空格或CSS强行控制。

搜索框 placeholder 里的空格被压缩怎么办

直接在 placeholder 属性里敲两个空格，比如 placeholder="搜索 商品"，浏览器只显示一个空格——这是 HTML 默认的空白压缩行为，不是 bug，而是规范。解决的核心思路是：用语义明确、渲染稳定的不可折叠空格替代键盘空格。

必须用  ，不能用普通空格或 Unicode 字符直写

  是唯一推荐的方案，它代表 non-breaking space（不换行空格），在所有主流浏览器中渲染一致，且不会因容器宽度变化导致“商品”被挤到下一行。

•   必须带开头的 & 和结尾的 ;，写成 &nbsp 或  （少分号）会失效
• 别在 HTML 源码里直接写 \u00A0 —— 编码不匹配时可能乱码，尤其在 UTF-8 与 GBK 混用环境
• 全角空格（如中文输入法下的空格）虽能显示多个，但语义错误、可访问性差，屏幕阅读器可能读作“汉字”，不推荐

Vue/React 里 placeholder 动态赋值要转义

框架模板不解析 HTML 实体，直接写   会被当字符串字面量，导致页面显示文字 “ ” 而非空格。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• React JSX 中用 {"搜索\u00A0\u00A0商品"} 或 {"搜索" + "\u00A0\u00A0" + "商品"}
• Vue 模板中用 :placeholder="'搜索' + '\u00A0\u00A0' + '商品'"
• 避免用 innerHTML 或 dangerouslySetInnerHTML 注入   —— 有 XSS 风险，且绕过框架响应式机制

别为了“多空格”硬堆   或滥用 CSS

如果目标是让“搜索”和“商品”之间视觉间距更大，    看似简单，实则埋坑：

立即学习“前端免费学习笔记（深入）”；

• 多个   是样式问题，不是内容问题——该用 CSS 的 letter-spacing 或伪元素控制
• white-space: pre 会强制禁用换行，导致长提示语溢出容器，且影响内部 <span></span> 等行内元素布局
• <pre class="brush:php;toolbar:false;"></pre> 标签完全不适合 input 的 placeholder 场景，语法不合法

真正容易被忽略的是：placeholder 本质是提示文案，不是排版画布。空格是否“看得见”，取决于它是否被浏览器当作有效内容渲染；而是否“该存在”，取决于文案语义是否需要那个间隙——先想清楚后者，再选前者。