先记住这个答案
打印时浏览器会把页面重新排进有限纸张，并按页切开内容；屏幕上的固定高度、滚动区域和操作栏因此可能裁掉正文或浪费纸面。先用 @media print 恢复文档流与可读对比度，再检查多页订单、长表格和链接地址是否真的可用。break-inside: avoid 只是分页偏好，内容高于一页时仍可能被拆开。
@media print限定打印规则- 隐藏导航并展开滚动内容
- 跨页控制只是浏览器偏好
- 用打印预览验收多页结果
订单页从屏幕布局转到纸面
订单详情页屏幕上左右分栏，左边固定导航，右边内容区滚动。直接打印可能只得到滚动区当前一屏，按钮也占据纸面。打印样式可隐藏导航和按钮，让主内容恢复正常流与可见溢出，并用 break-inside: avoid 减少单张订单卡跨页。最终仍要用浏览器打印预览检查多页结果，尤其是长表格和背景色。
@media print {
.site-nav, .actions { display: none; }
.content { overflow: visible; height: auto; }
.order-card { break-inside: avoid; }
a[href]::after { content: " (" attr(href) ")"; }
/* 纸面保留链接目标和完整内容 */
}print 是媒体类型，与屏幕尺寸特性不同。
这里的链接规则会把所有带 href 的地址印出来，适合演示机制，却不适合原封不动用于订单页。订单操作按钮、站内锚点和带令牌的链接都可能混在其中。实际项目应只给需要纸面核对的公开链接加专门的类，或者在模板里直接写出来源地址，避免把查询参数和内部路径印到纸上。
分页是打印独有的约束
浏览器打印时会重新匹配样式并按纸张分页，position: fixed、滚动容器和大块背景可能带来意外结果。break-inside 只是分页偏好，项目大于一页时浏览器仍可能拆开。链接地址是否需要打印应看文档用途，内部锚点和长查询字符串未必适合一律展开。深色主题也要检查打印对比度，不要依赖浏览器一定打印背景。
例如一张订单卡里有很长的商品清单，整张卡片可能超过单页高度。这时要求整卡不分页做不到，可以只让订单编号和第一行商品保持在一起，再允许后续条目分页。验收时至少用一页内容和跨两页的真实订单各预览一次；只检查短样本，发现不了第二页标题缺失或表头断开的情况。
容易答错的地方
- 只把页面宽度改小就算打印适配
- 打印有分页、交互元素清理和滚动内容展开等独立问题。
- 认为
break-inside: avoid保证绝不跨页 - 一张卡片高于纸张可用高度时，浏览器仍可能拆分。
面试官还会怎么问？
打印时为什么滚动区内容丢失？
屏幕布局常给区域固定高度和 overflow；打印样式应恢复完整内容流。
链接地址应该全部附在文字后吗？
只对有价值的外部链接适用，内部锚点和很长的参数链接可能使纸面更乱。
如何检查打印效果？
用打印预览看不同页数、边距、颜色和长内容，不只看屏幕截图。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。