pre标签是浏览器中唯一能原样保留空格、制表符和换行符的语义化标签，但需显式设置等宽字体、正确转义html字符、合理配置white-space及overflow等css属性，否则易导致错位、溢出或解析错误。
pre 标签不是“加个样式让文字整齐点”的工具，它是浏览器里唯一能原样保留空格、制表符（\t）、换行符（\n）的语义化标签。用错或只靠默认行为，中文代码对不齐、日志错位、横向溢出看不见，基本是必然结果。
为什么直接写 <pre class="brush:php;toolbar:false;">console.log("你好")</pre> 会歪？
根本不是 pre 失效，而是浏览器默认用“微软雅黑”这类非等宽中文字体渲染——一个汉字占两个英文字符宽度，console.log("hello") 和 console.log("你好") 在同一列必然错开。
- 必须显式设置等宽字体族：
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; - 别只写
monospace：Windows 下它常被映射到“新宋体”，根本不是等宽 - 中文系统尤其要验证实际生效字体，可用
getComputedStyle(el).fontFamily检查
怎么安全放带 、<code>>、& 的代码？
pre 本身不做任何转义，它只是照单全收你给的字符。直接塞未处理的 HTML 片段，浏览器会尝试解析标签，轻则内容消失，重则页面结构崩坏。
- 手动转义：把
换成 <code><，>换成>，&换成& - 更推荐嵌套结构：
<pre class="brush:php;toolbar:false;"><code>...</code></pre>，再配合 Prism.js 或 highlight.js —— 它们会在运行时自动转义并高亮 - 服务端渲染时，务必在插入前对内容做 HTML 实体编码，不能依赖前端补救
white-space 选 pre 还是 pre-wrap？
默认 white-space: pre 禁止折行，哪怕容器只有 200px 宽，一行 500 字符也会横向撑开、溢出不可见。
- 想严格还原源码布局（如 ASCII 艺术、固定列日志）：保持
white-space: pre，但必须配overflow-x: auto+max-width - 日常代码/日志展示更实用：用
white-space: pre-wrap，保留缩进和换行，同时允许长单词在边界处折行 - 避免用
word-break: break-all：它会强行切断英文单词，破坏可读性，仅限纯二进制 dump 类场景
最容易被忽略的一点：所有样式（字体、溢出、空白处理）都得通过 CSS 显式声明，pre 标签自己不带“智能适配”。它只忠实地执行两件事——保留空白符、默认用等宽字体——其余全是你的责任。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
