pre标签无wrap属性，其换行必须用white-space: pre-wrap配合overflow-wrap: break-word实现；textarea的wrap值对pre无效，且pre-wrap在中英文混排时折行策略不同。
pre 标签根本没有 wrap 属性
这是最常被误解的一点：pre 标签在 HTML 规范中**从未定义过 wrap 属性**。你看到的 wrap="soft" 或 wrap="hard" 只属于 textarea，对 pre 完全无效——写上去浏览器会忽略，DevTools 里也查不到对应行为。
常见错误现象：
- 给
pre加了wrap="soft"，结果长行照样横向溢出 - 用 JS 动态设置
pre.setAttribute('wrap', 'soft')，毫无效果 - 误以为
pre和textarea换行逻辑一致，导致样式调试走偏
pre 自动换行必须靠 white-space: pre-wrap
pre 默认是 white-space: pre，它保留所有空格和换行符，但**禁止自动折行**——超长无空格字符串（如 base64、URL、长变量名）会直接撑破容器。
要让它既保留格式又不溢出，唯一可靠方式是显式设置：
pre {
white-space: pre-wrap;
overflow-wrap: break-word; /* 或 word-break: break-all，但慎用 */
}
注意要点：
-
pre-wrap是现代标准值，Chrome/Firefox/Safari/Edge 均原生支持，无需加-moz-等前缀（IE11 及更早需降级，但已可忽略） -
overflow-wrap: break-word处理“不可断开的长串”，比如https://example.com/verylongpathwithnospaces - 别用
word-break: break-all：它会在任意字符中间硬切，破坏代码可读性（如把const切成con<br>st
）
pre-wrap 在中文/英文混合场景下的实际表现
white-space: pre-wrap 对中英文换行策略不同：
- 英文单词间有空格 → 优先在空格处折行（语义合理）
- 中文连续字符（如“这是一段没有标点也没有空格的长句子”）→ 浏览器按字折行，基本不会溢出
- 中英文混排（如“函数名：getUserById_v2”）→ Chrome 通常在下划线或数字边界折行，Firefox 可能更保守，但都比
pre-line更可靠
容易踩的坑：
- 嵌套
pre时没重置子元素white-space，导致内层行为异常 - 父容器设了
font-family: monospace但没配line-height，折行后行距挤压，影响阅读 - 服务端返回的文本含 \r\n，前端用
textContent插入pre，pre-wrap能正确识别并渲染，无需额外替换
替代方案：pre + code 组合更稳妥
如果你展示的是代码片段，建议结构用 <pre class="brush:php;toolbar:false;"><code>...</code></pre>，然后只对 code 设样式：
pre code {
white-space: pre-wrap;
overflow-wrap: break-word;
}
这样做的好处：
- 语义更清晰：
code表示计算机代码，pre仅负责容器布局 - 避免意外继承父级
white-space设置（比如某些 UI 库会给pre加全局样式） - 方便后续加语法高亮：高亮库通常操作
code内部，不影响外层pre的换行逻辑
真正复杂的地方不在 CSS 本身，而在于你是否清楚内容来源——用户输入？日志输出？JSON 响应？每种来源的换行符类型（\n / \r\n）、空格密度、特殊字符（\u200B、\u00AD）都会影响最终折行位置，不能只靠一个 pre-wrap 一劳永逸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
