标签是唯一能强制保留源码级空格、换行、制表符的语义化标签，但需显式设置等宽字体、转义html字符、配合white-space: pre-wrap和overflow-x: auto等css才能正确显示中文代码或日志。
pre 标签不是“让文本看起来整齐”的装饰工具，它是浏览器渲染逻辑中唯一能强制保留源码级空格、换行、制表符（\t） 的语义化标签。用错地方或只靠默认行为，大概率会出对齐错乱、中文不等宽、内容溢出等问题。
为什么 pre 里的中文代码/日志看起来歪斜？
根本不是标签没起作用，而是浏览器默认用系统常规字体（比如 Windows 上的“微软雅黑”）渲染，而该字体里中文是全角、英文是半角——一个汉字 ≈ 两个 ASCII 字符宽度。结果就是：
-
console.log("你好")和console.log("hello")在同一列对不齐 - ASCII 表格竖线断裂、缩进塌陷
- 日志时间戳和消息错位
必须显式指定等宽字体族：font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
别单写 monospace —— 它只是关键字，中文系统常把它映射到非等宽字体，等于没设。
怎么安全地在 pre 里放 HTML 或 JS 代码？
直接把带 、<code>>、& 的代码贴进去，浏览器会尝试解析，轻则标签被吞，重则整个页面结构错乱。
正确做法只有两个：
- 手动转义：把
换成 <code>，<code>>换成>，&换成& - 嵌套
code标签：用<pre class="brush:php;toolbar:false;"><code>...</code></pre>结构，再配合语法高亮库（如 Prism.js），它会在运行时自动处理转义
注意：pre 本身不负责转义，它只忠实地渲染你给它的字符。想让它“显示代码”，你得先确保传进去的是纯文本字符，不是未逃逸的 HTML 片段。
pre 内容太长导致横向滚动条难用？
默认 white-space: pre 会禁止换行，哪怕容器很窄，整行也会强行撑开。这不是 bug，是设计如此。
若需兼顾可读性与布局适应性，改用：
-
white-space: pre-wrap：保留换行和空格，但允许长单词/URL 在边界处折行 -
word-break: break-all（慎用）：连英文单词都可能断开，适合日志类纯文本 - 必须加
overflow-x: auto+max-width，否则横向溢出不可见也不可滚动
别依赖 pre 自动适配宽度 —— 它的原始语义就是“按源码字符位置铺开”，不是响应式容器。
哪些场景不该用 pre？
它解决的是「源码级空白保留」问题，不是「文字对齐」或「排版美化」问题。以下情况属于误用：
- 仅为了实现左对齐或固定字体而套
pre—— 用div+font-family+white-space: pre更语义清晰 - 展示用户输入的富文本内容（含链接、强调等）——
pre会把所有 HTML 当纯文本，失去交互能力 - 需要 SEO 抓取关键词的说明文字 ——
pre内容权重低，且无法被屏幕阅读器自然分段
真正需要 pre 的时刻很窄：你明确知道那段文本的每个空格、每处缩进、每行换行都有语义，且不能被任何渲染逻辑修改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
