应使用 white-space: pre-wrap 实现“保留格式+可折行”，pre 会撑开列宽，pre-line 会合并空格导致缩进丢失；配合 <pre> 标签更可靠，移动端需加 word-break 或 overflow-wrap 防溢出。
表格单元格里设 white-space: pre 会撑开列宽
直接在 <td> 或 <th> 上用 white-space: pre，文本里的空格、制表符、换行符全被保留，但浏览器不会为它自动折行——哪怕内容是 100 个空格加一段长 JSON，也会横向拉伸整列，破坏表格布局。
- 典型表现：
<td style="white-space: pre"> key: value\n list: [1,2,3]</td>中的缩进和换行都被保留，但列宽可能暴涨 - 真正需要的是“保留格式 + 可折行”，此时该用
white-space: pre-wrap，它既保留所有空白字符，又允许在单词边界或空白处软换行 - 如果单元格有固定宽度（比如
width: 200px），pre下必须配overflow-x: auto，否则右侧内容不可见；而pre-wrap多数情况无需额外滚动
white-space: pre-line 在表格里容易误判换行效果
很多人以为 pre-line 能“保留用户输入的换行”，结果发现粘贴进来的带缩进文本，缩进全没了——因为 pre-line 会把连续空格/制表符合并成一个空格，只保留换行符本身。
- 适用场景：纯文本评论、邮件正文这类“换行有意义，但空格只是排版冗余”的内容
- 不适用场景：代码片段、YAML 配置、带缩进的错误日志——这些依赖空格层级，必须用
pre-wrap或pre - 注意：表格中若用
pre-line，且内容含大量空格开头的行（如" - item"），渲染后变成"- item"，语义丢失
表格嵌套 <pre> 标签比纯 CSS 更可靠
单纯靠 white-space 模拟预格式化文本，在表格里常出问题：继承链干扰、line-height 错位、打印样式失效。而原生 <pre> 标签自带语义和默认样式，更稳。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确写法：
<td><pre style="margin: 0; padding: 0; background: none;">...</pre></td> - 优势：天然支持
tab-size、对font-family的等宽默认更一致，且无障碍阅读器能正确识别为“预格式化内容” - 坑点：
<pre>默认有上下 margin 和 padding，不重置会导致单元格内边距异常；另外它不响应table-layout: fixed的列宽约束，需配合max-width控制
移动端表格中 white-space 需配合 word-break
在小屏设备上，即使用了 pre-wrap，遇到超长无空格字符串（如 base64、URL、长 hex 值），依然会横向溢出——white-space 不管单词内部断行，那是 word-break 或 overflow-wrap 的事。
立即学习“前端免费学习笔记（深入）”；
- 安全组合：
white-space: pre-wrap; word-break: break-all;或overflow-wrap: break-word; - 慎用
word-break: break-all：它会在任意字符间断行，中文场景下可能把“数据库”切成“数 据 库”，建议优先试overflow-wrap: break-word - 注意兼容性：
overflow-wrap在 IE 中需写word-wrap: break-word回退
表格里保留格式不是加个 white-space 就完事；关键得看内容类型——是纯换行？带缩进？含长单词？每种都对应不同的值和配套规则，漏掉任一环，轻则布局错乱，重则信息不可读。
