默认不换行，因其浏览器默认 white-space: normal 合并所有空白符；多行代码应嵌套在 中并设 white-space: pre-wrap 以安全保留换行与缩进。
标签本身不控制换行，它只是语义化地标识一段内联代码；真正决定换行行为的是 CSS 的 white-space 属性或父容器的布局方式。直接给 加 white-space: pre 会导致文本溢出、破坏响应式，必须配合 overflow-wrap 或 word-break 才能安全使用。
为什么
浏览器对 的默认样式是 white-space: normal（和 一样），所有空白符（包括 \n）都被合并为单个空格。所以即使你在 HTML 源码里写成：
<code>console.log("hello");<br>return true;</code>
实际渲染仍是一行——因为 内部无效，且源码换行符被忽略。
常见错误现象：
- 从 API 获取带
\n的代码字符串，直接插进里，结果全挤在一行 - 手动加多个
中，但被浏览器静默忽略 - 用
white-space: pre后代码横向滚动，移动端完全不可读
white-space 的三个实用取值对比
对 或其父元素设置 white-space 是最常用手段，但选错值会出问题：
-
white-space: pre-line：保留换行符\n，但合并连续空格和制表符。适合大多数代码片段展示，不会因缩进而撑宽容器 -
white-space: pre-wrap：既保留\n，也保留空格和制表符，且允许自动换行。适合带缩进的多行代码（如 Python），但要注意缩进过深可能触发换行截断关键词 -
white-space: pre：原样保留所有空白，不自动换行。必须搭配overflow-x: auto或word-break: break-all，否则必然溢出
推荐优先用 pre-wrap，它兼顾可读性与安全性。例如：
<pre class="brush:php;toolbar:false;"><code class="js" style="white-space: pre-wrap;">function hello() {<br> console.log("world");<br>}</code>
用
天然支持 white-space: pre，且默认有等宽字体和上下 margin，和 语义互补： 表示“预格式化块”， 表示“这段是代码”。两者嵌套是 W3C 推荐写法。
关键点：
- 不要只用
单独包裹多行代码 - 不要给
设display: inline，否则会丢失预格式化特性 - 若需限制宽度并允许滚动，给
加max-width和overflow-x: auto
一个生产环境可用的最小样式：
<style><!--<br>pre { margin: 0; padding: 8px; background: #f5f5f5; border-radius: 4px; }<br>code { font-family: ui-monospace, 'SFMono-Regular', monospace; }<br>--></style>
动态插入代码时注意转义与换行符处理
JavaScript 动态写入代码内容时，容易忽略两点：
- HTML 字符转义：直接把含
、&的代码字符串塞进innerHTML会破坏结构，必须先用textContent或document.createTextNode() - 换行符一致性：后端返回的
\r\n（Windows）在某些浏览器下可能不被pre-wrap正确识别，建议前端统一替换为\n
安全写法示例：
const codeEl = document.querySelector('code');<br>const raw = response.code.replace(/\r\n/g, '\n');<br>codeEl.textContent = raw;
复杂场景（如语法高亮）应使用专用库（如 Prism.js、highlight.js），它们内部已处理好换行、转义和 token 渲染逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
