如何用 CSS 为网页设计可读、节省且稳定的打印样式？

简化版

使用 @media print 隐藏导航和交互控件、调整颜色与字号、展开必要链接，并通过 break-before/after/inside 控制分页；@page 可设置纸张尺寸和页边距。打印环境、浏览器和纸张不可完全预测，因此应保留正文语义、避免固定高度，并用打印预览和 PDF 做跨页测试。

详细版

打印样式应聚焦用户真正需要保存的内容：移除菜单、广告、按钮和动画，恢复深色主题为浅底深字，确保链接与代码仍可识别。布局上把多列改为单列，避免横向溢出，并让图片最大宽度不超过页面。

分页时用 break-inside: avoid 尽量保持表格、代码块和卡片完整，用 break-before 或 break-after 控制章节，但“avoid”只是偏好，内容超过一页时浏览器仍必须拆分。旧属性 page-break-* 可作为兼容补充。

还要考虑背景默认不打印、URL 可能暴露敏感参数、A4 与 Letter 尺寸不同，以及浏览器页眉页脚通常由用户控制。

完整版教学

一、屏幕页面不能原样塞进纸张

屏幕可以滚动、点击和播放，纸张只有固定页面。顶栏、侧栏、悬浮按钮和视频控件在纸上失去交互价值，却会占据面积和墨水；响应式两列布局也可能在窄纸面上挤压正文。

屏幕：导航 + 侧栏 + 可滚动正文 + 交互
打印：标题 + 元信息 + 连续正文 + 必要引用

打印样式是内容重新编排，不只是把背景改白。先列出用户打印的任务，例如保存教程、报销凭证或合同，不同任务决定哪些内容必须保留。

二、media print 建立独立但复用语义的表现层

可以单独链接 media="print" 样式表，也可在主 CSS 中使用 @media print。原 DOM 语义继续存在，打印层只改变展示，避免维护一份容易过期的“打印版 HTML”。

@media print {
  nav, footer, .actions, video { display: none !important; }
  main { max-inline-size: none; margin: 0; }
  body { color: #000; background: #fff; font: 11pt/1.5 serif; }
  img, svg { max-inline-size: 100%; block-size: auto; }
}

若 A4 可用正文宽约 170mm，一个固定 1200px 图表很可能溢出。使用相对最大宽度和自动高度让资源按纸面缩放，但细小文字也要实际预览确认可读。

三、分页控制是建议而不是绝对命令

break-before、break-after 和 break-inside 分别控制元素前、后、内部的分页偏好。标题不应孤零零落在页尾，可要求标题后避免分页；短代码块和图片说明则可尽量保持整体。

@media print {
  h2 { break-before: page; }
  h2, h3 { break-after: avoid; }
  pre, table, figure, blockquote { break-inside: avoid; }
}

一个代码块高 320mm，而 A4 扣除边距后的可用高度约 257mm，浏览器不可能满足 avoid，只能拆开或溢出。因此分页规则是约束求解中的偏好，不是保证。

四、page 规则控制纸张而非页面组件

@page 可设置 size 和 margin，例如 A4 纵向与 16mm 页边距。部分更高级的页眉、页脚和边距盒能力支持不一致，不能假定所有浏览器都能输出复杂出版效果。

@page {
  size: A4 portrait;
  margin: 16mm 18mm;
}

A4 是 210 × 297mm，左右各 18mm 后正文宽约 174mm；Letter 是 216 × 279mm，纵向空间更短。关键内容不能依赖某一纸型恰好在某处分页，应在至少两种目标纸型预览。

五、颜色、背景和链接需要纸面语境

浏览器常默认不打印背景图与背景色，以节省墨水；依赖彩色底显示白字可能得到“白字白纸”。应显式恢复高对比度文字，并确保状态不只通过颜色区别。

@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    overflow-wrap: anywhere;
  }
}

展开链接能让纸面保留去向，但长 URL 会破坏排版，也可能包含 token、查询参数或内部地址。更安全的做法是只对正文外链展开，过滤登录、按钮和敏感链接，或使用脚注编号。

六、表格、代码和表单是高风险内容

宽表格可能超过纸面，代码行可能因 white-space: pre 横向截断，空白表单控件打印后又无法表达当前选择。应针对内容选择换行、缩小、横向纸张或专用摘要，而不是统一缩放整页。

内容	常用处理	风险
宽表格	重排列、横向页或允许拆分	字体过小
代码块	`white-space: pre-wrap`	换行改变阅读
输入控件	输出当前值的文本视图	伪元素兼容差
图表	高对比配色和文字标注	背景不打印

假设 8 列表格每列最低 28mm，总宽 224mm，已经超过 A4 全宽 210mm，更别说页边距。此时缩到 75% 可能难读，改列或使用横向页面更合理。

易错点：打印优化的目标是保留信息，不是让纸面截图与屏幕像素完全一致。

七、常见误区与追问

误区：用户会自动得到网页中的全部背景颜色。 浏览器通常允许用户关闭背景打印，关键信息不能依赖背景。
误区：break-inside: avoid 能保证元素永不跨页。 元素高于可打印区域时必须被拆分或溢出。
误区：隐藏所有链接即可让页面更干净。 正文链接仍是信息来源，可按场景显示 URL 或脚注。
追问：能否用 CSS 关闭浏览器页眉页脚？ 通常由打印对话框和用户设置控制，网页不能可靠强制关闭。
追问：为什么不要给打印正文固定高度？ 分页内容长度不可预测，固定高度容易裁剪或制造大片空白。
追问：怎样测试打印样式？ 使用浏览器打印媒体模拟、真实打印预览与 PDF 输出，并检查不同纸型、缩放和背景选项。

八、加强记忆

打印样式可以按“删、排、断、验”检查：删掉失去意义的导航和交互，按纸面重排为清晰单列并处理颜色链接，用 break 与 @page 给出分页和纸型偏好，最后在 A4、Letter、不同缩放及背景开关下验证。始终保留语义正文和信息等价性，接受浏览器与用户拥有最终打印控制权，才能得到既省纸墨又不会截断关键内容的输出。

简化版

详细版