电商价格标签用 防止货币符号与数字断行错位，如¥ 199；标题对齐用 或 微调；详情页用white-space:pre-wrap保留缩进换行；禁用 替代CSS间距。

电商价格标签里为什么总用  

因为浏览器默认会把连续空格压成一个，而价格数字和货币符号（如 ¥199）一旦被换行或错位，用户一眼就容易看错。用   能锁住它们的相对位置，比如写成 ¥ 199，既防止 ¥ 孤零零挂在行尾，也避免数字和符号被意外断开。

常见错误现象：

• 直接敲空格：写 ¥ 199，在窄屏下可能变成 ¥ 换行、199 独占一行
• 混用全角空格：虽然能显示多个，但语义不清、可维护性差，且可能在表单提交时被后端误处理

实际场景中，商品列表页的「原价/现价」对比最依赖这个： ¥ 199  ¥ 299 ——两个   控制间距，比用 CSS 的 margin 更轻量、更确定。

商品标题里用   或   微调对齐

当页面有左右并列的卡片（比如“热销榜”和“新品推荐”），标题文字长度不一时，靠纯 CSS text-align 很难让末尾的“NEW”“HOT”图标严格垂直对齐。这时可以用窄空格微调：

•  （薄空格，约 1/6 em）适合插在英文缩写前，如 HOT  Air Fryer
•  （半角空格，约 1/2 em）更适合中英文混排的间隙，如 小米  无线充电器

注意： （全角空格）太宽，容易破坏响应式布局；而用 letter-spacing 会影响整个单词，不是局部间隙控制。

white-space: pre-wrap 在商品详情中保留换行和空格

电商后台常允许运营人员粘贴带缩进的参数表格或使用说明，比如：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

包装清单：
  ● 主机 × 1
  ● 充电线 × 1
  ● 说明书 × 1

如果容器用默认 white-space: normal，这些缩进和换行全被抹掉。加一句 white-space: pre-wrap 就能原样保留，又支持自动换行，比硬塞一堆   清晰得多。

性能影响很小，但要注意兼容性：IE9+ 和所有现代浏览器都支持，无需 polyfill。

别用   代替 CSS 间距

曾见开发把按钮内边距全写成 加入购物车    ，这是典型反模式：

• 语义污染：空格不是内容，不该出现在 HTML 结构里
• 响应式失效：缩放或换字体时，空格宽度浮动，对齐立刻崩
• 可访问性差：屏幕阅读器可能把一串   读成“空白、空白、空白”

真正该用 CSS 的地方，比如卡片间间隙、图文间距、按钮内边距，一律走 margin/padding。HTML 空格只解决「文本内部不可分割、需视觉隔离」的极少数场景。

最容易被忽略的是：空格实体在 DOM 中是真实字符节点，大量滥用会轻微拖慢渲染，尤其在千条商品的列表页里——这时候宁可用 span 包一层再设 margin-left，也别堆  。

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