pre标签默认不折行，需用white-space:pre-wrap实现保留换行符与自动折行；必须配合width/max-width、overflow-x:auto及textcontent注入，避免html转义破坏换行符。
pre 标签默认不自动换行，长文本会水平溢出容器——这不是 bug，而是其语义决定的：它只认真实换行符
，不理会容器宽度。要让它既保留空格缩进、又按需折行，必须用 CSS 显式干预。
为什么 white-space: pre-wrap 是唯一靠谱选择
它同时满足两个刚性需求：保留原始
、 和连续空格；在到达容器边界时自动折行（类似 normal 的行为）。相比其他值：
-
white-space: pre：保留格式但绝不折行 → 溢出 -
white-space: break-spaces：能折行但 Safari 支持差（截至 2026 年仍不稳定） -
word-break: break-all：强行截断单词 → URL、base64 等不可读
现代浏览器（Chrome 1+、Firefox 1+、Safari 3+、Edge 12+）已全支持 pre-wrap，无需降级脚本。
必须配合的 CSS 设置
单设 white-space: pre-wrap 不够，常见漏项会导致失效：
- 父容器没设
width或max-width→pre无限伸展，折行无从谈起 - 忘记重置
overflow-x→ 折行后若仍有超宽内容（如未换行的长 URL），可能被裁剪 - 被全局 reset.css 覆盖（例如设了
white-space: normal）→ 直接废掉pre语义
推荐最小安全样式：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.log-output pre {
white-space: pre-wrap;
overflow-x: auto; /* 兜底：防极少数未折行内容 */
margin: 0;
}
动态注入内容时，textContent 是铁律
用 innerHTML 塞字符串，哪怕内容含
，浏览器也会把它当普通字符解析，换行符丢失。验证方法很简单：
console.log(JSON.stringify(yourString)) —— 如果看到 "line1\nline2"（双反斜杠），说明是字面量，不是真实换行；如果看到 "line1
line2"（单反斜杠），才是有效换行符。
- ✅ 正确：
el.textContent = apiResponse.log - ❌ 错误：
el.innerHTML = apiResponse.log（除非你手动把<br>，但这已违背pre本意） - ⚠️ 危险：
el.innerText = str→ 会折叠所有空白，缩进全毁
服务端渲染时，HTML 转义是隐形地雷
模板引擎（如 EJS、Nunjucks、Django）默认对变量做 HTML 转义，{"msg": "a
b"} 渲染出来变成 {"msg": "a
b"}，
变成字面量
，前端拿到的仍是无效字符串。
- EJS：用
（短横）跳过转义 - Nunjucks：用
{{ rawLog | safe }} - Django：用
{{ rawLog|safe }}，但确保内容可信（否则 XSS） - 最稳方案：服务端返回前把
textContent注入，彻底绕过 HTML 解析阶段
真正容易被忽略的点：即使 CSS 和 JS 都写对了，只要服务端吐出的是被双重转义的字符串，pre-wrap 就永远不生效——因为浏览器根本没见过真实的
。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
