用CSS的white-space: pre-wrap属性可保留HTML中原始空格和换行，同时支持自动换行；配合等宽字体更利于对齐，且需检查父级样式是否覆盖。
HTML 里普通空格被合并，怎么保留原样
浏览器默认会把连续的空白字符（空格、换行、制表符）压缩成一个空格，所以直接敲多个 或连打空格，页面上还是只显示一个空格。
要让空格“真实可见”，得用语义明确的方案：
-
white-space影响 -
- 最可靠的是用 CSS 控制：
white-space: pre;或white-space: pre-wrap;，让元素内所有空白符原样渲染
弹窗内容（alert / modal）里空格不显示？
不是 HTML 渲染问题，而是 JavaScript 字符串处理或 DOM 插入方式导致的。比如用 alert("a b")，弹窗里确实会显示多个空格——浏览器 alert 对空格是原样呈现的；但如果你是往 modal 的 innerHTML 里塞字符串，又没加 CSS 保护，就会被压缩。
常见出问题的场景：
立即学习“前端免费学习笔记（深入）”；
- 从后端接口返回带空格的文案，直接赋值给
element.textContent→ 空格正常（因为 textContent 不解析 HTML） - 错误地用了
element.innerHTML = str，且 str 里只有普通空格 → 浏览器渲染时合并 - 弹窗模板用 JSX 或 Vue 模板写了
{{ msg }}，但没包裹或设white-space→ 同样被压缩
推荐写法：兼顾可读性与可控性
别靠堆 或猜浏览器行为。统一用 CSS + 语义化标记更稳妥：
姓名：张三 年龄： 28 城市： 北京
说明：
-
white-space: pre-wrap保留空格和换行，同时允许自动换行（比pre更实用） - 用等宽字体（如
monospace）能让空格对齐更直观，尤其适合字段冒号对齐场景 - 如果内容来自变量，确保传入的是带真实空格的字符串，而不是被 JS
.trim()或正则误删过的
容易忽略的坑：CSS 继承和重置
即使你写了 white-space: pre-wrap，也可能失效——因为父级有 white-space: normal，或者全局 CSS 重置了 pre 类型元素的样式。
检查点：
- 用浏览器开发者工具看 computed 样式，确认
white-space确实生效 - 避免在弹窗组件根元素上写
white-space: normal !important，它会覆盖子元素设置 - 如果用第三方 UI 库（如 Element Plus、Ant Design），它们的
message或notification默认不支持空格保留，得手动 wrapper 一层带样式的div
空格问题看着小，但一旦混在用户输入、日志输出、配置展示里，错位一两个空格就可能让关键信息对不齐——别依赖肉眼调试，用 white-space 和真空白字符组合，才是稳的。
