white-space: pre-wrap 是最稳妥的通用解法：保留空格、制表符、换行符并支持自动折行，不破坏语义与可访问性，适用于块级或 inline-block 元素，动态内容用 textcontent 直接赋值即可。

white-space: pre-wrap 是最稳妥的通用解法

直接给容器加 white-space: pre-wrap，就能让内部所有普通空格、制表符、换行符原样保留，同时支持自动折行——既不会撑破手机屏幕，也不用一个个数空格。它不改变语义，不引入额外标签，对可访问性和 SEO 也友好。

常见错误现象：只加了 white-space: pre，结果长无空格字符串（比如 base64 或一串英文）直接溢出容器，iOS Safari 尤其明显；或者用了 pre-line，发现空格又被合并了，根本没达到“连续”效果。

• 必须作用于块级或至少 display: inline-block 的元素；纯 inline 元素（如 span）也能生效，但得确认父容器没限制高度或溢出
• 若父容器设置了 text-overflow: ellipsis 或 overflow: hidden，pre-wrap 内容可能被截断，需补上 word-break: break-word
• 动态内容（如 API 返回的字符串）直接赋值给 textContent 即可，无需转义空格——这是比拼接   更干净的做法

用   只适合极少量、静态、语义明确的空格

  是唯一能在不改 CSS 的前提下强制显示一个不可折叠空格的方案，但它不是“空格增强器”，而是独立字符实体。写三个空格就得敲三遍    ，多一个少一个都得手动数。

容易踩的坑：在 Vue 的 v-html 或 React 的 dangerouslySetInnerHTML 中直接插入未转义的   字符串，可能被二次解析；在中英文混排时，  宽度依赖字体，中文下常比英文窄，对齐会漂移。

• 别用它做段落缩进或表格对齐——语义错位，响应式下极易错乱
• 不能嵌套使用，比如     是合法的，但   这种写法会暴露原始字符，浏览器不识别
• 如果内容来自用户输入，千万别让后端把空格全替换成   再传——数据失去原始格式，.trim() 失效，且传输体积增大

不要滥用

 标签

<pre class="brush:php;toolbar:false;"></pre> 本质是 white-space: pre 的快捷写法，自带等宽字体和默认外边距。它适合代码、日志、ASCII 图这类真正需要“源码级还原”的场景，而不是用来解决普通段落里的空格问题。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

典型翻车现场：给一段介绍文字套 <pre class="brush:php;toolbar:false;"></pre>，结果中文字体发虚、字号变小、上下多出大空白；或者在 <p></p> 里嵌 <pre class="brush:php;toolbar:false;"></pre>，HTML 解析器直接帮你闭掉 <p></p>，结构错乱。

• 若真要用，记得重置样式：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + margin: 0;
• <pre class="brush:php;toolbar:false;"></pre> 里的 、<code>> 不做 HTML 转义会当真实标签解析，动态内容务必先过滤或转义
• 想等宽对齐？优先考虑 font-variant-numeric: tabular-nums; 配合数字列，而不是靠 <pre class="brush:php;toolbar:false;"></pre> 堆空格

JavaScript 动态插入时，textContent 比 innerHTML 更可靠

用 JS 设置含多个空格的文本，最简路径是：容器加好 white-space: pre-wrap，然后 el.textContent = "a b";。空格原样保留，不触发 HTML 解析，无 XSS 风险，也不用写正则替换。

反模式示例：el.innerHTML = "a b".replace(/ /g, " "); —— 既污染 DOM，又让空格变成不可编辑、不可复制的实体，还可能误替标签内的空格（比如 class="foo bar" 里的空格）。

• 如果非要用 innerHTML，确保字符串已做过 HTML 实体转义（, <code>>, &），否则 pre-wrap 也救不了结构崩塌
• textContent 对开头/结尾空格也完全保留，而 innerHTML 在某些旧环境里仍可能塌缩首尾空白
• 服务端返回带缩进的 JSON/YAML 字符串，前端直接 textContent 渲染即可，不用预处理空格

真正难的不是让空格显示出来，而是分清这个空格到底属于内容还是样式——如果是对齐、缩进、间距，90% 的情况该交给 padding、text-indent 或 Flex 布局；只有当空格本身承载语义（比如诗歌排版、代码缩进、日志格式），才动 white-space 或  。

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