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;">&lt;code class=&quot;js&quot;&gt;...&lt;/code&gt;</pre>，再配 Prism.js 等库自动处理转义与高亮

绝对不要在 pre 内直接写未转义的 <script></script> 或含双引号的 JSON 字符串

pre 宽度溢出或换行失控怎么办？

默认 white-space: pre 禁止换行，哪怕容器只有 200px，一行 500 字符也会横向撑开。这不是 bug，是设计本意——它要的是“源码位置精确还原”。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• 加 overflow-x: auto + max-width，否则溢出内容不可见也不可滚动
• 需要折行时，用 white-space: pre-wrap：保留换行和空格，但允许长单词/URL 在边界处断行
• 禁用 width 属性：pre width="80" 是 HTML4 废弃属性，HTML5 完全无效
• 别给 pre 设固定 width 或 flex-basis——它不是响应式容器，强行限制会破坏格式语义

最容易被忽略的一点：pre 本身不提供语法高亮，也不校验 HTML 实体；它的全部责任只是“忠实地把字节流按位置铺开”。你看到的错乱，90% 是字体、转义或 CSS 控制缺失导致的，而不是标签用错了。