正确做法是在@media print中为<pre>或其外层块级容器设置break-inside: avoid-page；单独使用avoid无效，<code>标签因内联特性不适用，PDF导出时该属性基本失效。
直接结论：在 HTML 编辑器中给 <pre> 或 <code> 外层容器加 break-inside: avoid-page（不是 avoid），且必须包裹在 @media print 中，否则对打印无实际作用；编辑器实时预览里看不到效果，这是正常现象。
为什么 break-inside: avoid 对代码块无效
它只在多列布局或分页上下文中起作用，而 <pre> 默认是块级元素，但浏览器不会自动把它当作「需要防跨页」的单元——除非你明确告诉它这是打印场景。单写 break-inside: avoid 会被解析为 avoid-column 或被忽略，尤其在 Chrome/Firefox 新版本中。
-
avoid是模糊值，W3C 已不推荐用于打印，仅保留语义兼容 -
<pre>内部是white-space: pre，但 break 控制权在容器层级，不是内容本身 - 直接给
<code>标签加该样式基本无效——它通常是非块级内联元素
必须加在哪一层：容器、包裹、还是编辑器配置？
必须加在 <pre> 上，或它外层唯一的块级父容器（比如 <div class="code-block">）。编辑器自身不干预这个 CSS，它只渲染你写的样式。
- ✅ 正确：
.code-block { break-inside: avoid-page; }或pre { break-inside: avoid-page; } - ❌ 错误：
code { break-inside: avoid-page; }（<code>默认 display: inline） - ❌ 错误：
body { break-inside: avoid-page; }（整个页面不能防内部断开） - ⚠️ 注意：如果编辑器用 iframe 隔离样式，需把规则注入 iframe 的
<style>或确保 scope 覆盖
@media print 里怎么写才真正生效
现代浏览器只在打印媒体查询中认真处理 avoid-page。不加 @media print，这条规则等于没写。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
/* 正确写法 */
@media print {
pre,
.code-block {
break-inside: avoid-page;
/* 可选：防止因边框/内边距挤占空间导致推页失败 */
margin: 0.5em 0;
padding: 0.75em;
}
}- 不要混用
page-break-inside: avoid—— 它已废弃，且和break-inside同时存在时可能冲突 - 若代码块含滚动条（如编辑器实时预览用了
overflow: auto），打印前务必重置：overflow: visible !important; - 部分编辑器（如 CodeMirror、Monaco）会动态生成 DOM，需确保样式选择器能命中最终渲染出的
<pre>
导出 PDF 时为什么还是断开了
因为大多数 HTML-to-PDF 工具（如 html2pdf.js、wkhtmltopdf）不执行标准分页引擎，而是截图或流式渲染，break-inside 基本被跳过。
- 唯一可靠方案：
page-break-before: always或page-break-after: always强制分页点 - 若必须保完整，可在 JS 中测量
<pre>高度，对比当前页剩余可用高度（约 800px 减去已用），不足则插入空<div style="page-break-before: always"></div> - 别依赖
break-inside在 PDF 导出中“自动适配”——它不自动，也不适配
最常被忽略的一点：break-inside: avoid-page 不压缩内容、不调整字号、不删空行。它只做一件事——当整块高度 ≤ 当前页剩余空间时，就让它完整留下；否则，整块移到下一页。你得先让代码块够短，或者接受留白换完整。
