white-space: pre-wrap 是最稳妥的通用方案：它保留空格、缩进和换行，同时支持自动折行，兼顾兼容性与实用性，避免 pre 溢出和 pre-line 合并空格的问题。

white-space: pre-wrap 是最稳妥的通用方案

想让一段文本里的空格、缩进、换行全部原样显示，又不希望长行撑破容器，white-space: pre-wrap 是当前兼容性与实用性平衡得最好的选择。它保留所有原始空白，同时允许自动折行——不像 pre 那样容易溢出，也不像 pre-line 那样会吃掉你精心加的多个空格。

常见错误现象：给 <p> 加了 white-space: pre，结果代码块在小屏上横向滚动，用户得拖着看；或者用了 pre-line，发现“字段名：   值”里的三个空格全被压成一个。

• 静态内容（如文档片段、配置示例）直接加内联样式：<p style="white-space: pre-wrap"> key: value</p>
• 动态渲染时（比如 Vue 的 v-html 或 React 的 dangerouslySetInnerHTML），务必用 textContent 或转义后再设 innerHTML，避免 XSS
• 别给整页或长列表加这个样式——它会让所有子元素内的空格逻辑都改变，可能意外影响按钮文字间距或链接排版

表格单元格里慎用

，优先用 CSS 控制

<pre> 套 <td> 是典型反模式：它会重置字体、行高、垂直对齐，还可能让表格边框塌陷失效。真正该做的是给 <td> 本身加 white-space: pre-wrap，再配合 overflow: hidden 或 max-width 防止撑开列宽。

容易踩的坑：border-collapse: collapse 下，padding 和 border 会掩盖空格视觉距离，调试时建议临时加 border: 1px solid red 看清真实边界。

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

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 小范围对齐（如“状态：  在线”）用   更轻量，不干扰表格流
• 大段带缩进的日志或 JSON，用 td { white-space: pre-wrap; font-family: ui-monospace, "SFMono-Regular", monospace; }
• 绝对不要用全角空格（`　`）——中英文混排时宽度浮动，iOS 和 Windows 渲染差异明显

用   时必须注意分号和上下文

  不是“多按几次空格键”的替代品，它是独立字符实体，每个都要写全、带分号。漏掉分号（比如写成 &nbsp）会导致浏览器不识别，原样输出字符串，页面上直接显示“ ”。

使用场景非常有限：仅适合单词间防断行（Mr. Smith）、字段名后固定缩进（姓名：  张三）、或纯静态文案微调。

• React/Vue 模板中要写成   字面量，不能在 JSX/模板字符串里拼接未转义的 " "
• 数量控制在 1–4 个以内；超过就该换 white-space 或 padding-left
• 别嵌套用，比如     就行，别写成     ——后者会被解析为两个字符，第二个   失效

等宽字体不是默认选项，

 的字体副作用必须覆盖

<pre> 默认用 font-family: monospace，但多数系统下中文 monospace 字体（如 Courier New）字形发虚、字号偏小、行距难控。这不是 bug，是它的设计使然。

如果你只是想保留空格逻辑，而不是真要“代码编辑器感”，那更干净的做法是用 <div style="white-space: pre-wrap; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;"> 替代 <pre>。

• 中英文混排时，ui-monospace（macOS/iOS）或 SFMono-Regular 比传统 monospace 更稳
• 用 <pre> 展示真实代码？记得对 < > & 做 HTML 转义，否则内容会被当标签解析
• 动态内容来自 API？宁可用 textContent + white-space: pre-wrap，也别图省事直接 innerHTML 塞 <pre>