pre标签唯一不可替代的作用是强制保留源码级空白符并默认等宽渲染；中文对不齐因非等宽字体，需显式设等宽中文字体栈；含html符号代码须转义或嵌套code；溢出需加overflow-x:auto和max-width，折行用white-space:pre-wrap。
pre 标签唯一不可替代的作用，是强制保留源码级的空格、换行符和制表符（\t），且默认用等宽字体渲染——这不是“看起来整齐”的视觉技巧，而是浏览器渲染引擎中唯一能绕过空白折叠规则的语义化块级元素。
为什么 pre 里的中文代码总对不齐？
不是标签失效，而是浏览器默认用系统常规字体（如“微软雅黑”）渲染：一个汉字 ≈ 两个 ASCII 字符宽度。结果就是 console.log("你好") 和 console.log("hello") 在同一列错位。
- 必须显式设置等宽中文字体栈：
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; - 单写
monospace不可靠——Windows 下常映射为非等宽字体，等于没设 - 别依赖浏览器自动 fallback：中文环境里
monospace很可能指向“新宋体”这类比例字体
怎么安全地在 pre 里放带 HTML 符号的代码？
pre 本身不转义、不解析、不拦截——你贴进去什么，它就原样输出什么。直接写 <div>，浏览器会尝试解析成真实标签，轻则结构错乱，重则 XSS 风险。
<ul>
<li>手动转义三字符：<code> 替换 <code>，<code>> 替换 >，& 替换 &
code：<pre class="brush:php;toolbar:false;"><code class="js">...</code></pre>，再配 Prism.js 等库自动处理转义与高亮pre 内直接写未转义的 <script></script> 或含双引号的 JSON 字符串
pre 宽度溢出或换行失控怎么办？
默认 white-space: pre 禁止换行，哪怕容器只有 200px，一行 500 字符也会横向撑开。这不是 bug，是设计本意——它要的是“源码位置精确还原”。
- 加
overflow-x: auto+max-width，否则溢出内容不可见也不可滚动 - 需要折行时，用
white-space: pre-wrap：保留换行和空格，但允许长单词/URL 在边界处断行 - 禁用
width属性：pre width="80"是 HTML4 废弃属性，HTML5 完全无效 - 别给
pre设固定width或flex-basis——它不是响应式容器，强行限制会破坏格式语义
最容易被忽略的一点：pre 本身不提供语法高亮，也不校验 HTML 实体；它的全部责任只是“忠实地把字节流按位置铺开”。你看到的错乱，90% 是字体、转义或 CSS 控制缺失导致的，而不是标签用错了。
