网页打印时内容被截断？本文是前端工程师必备的 CSS 打印优化指南。深入解析 page-break-before、page-break-inside、page-break-after 的使用方法和实战场景，帮你完美控制表格、代码块等元素的跨页显示，彻底提升打印文档的专业体验。

引言：你是否关注过网页的“打印体验”？

在日常的前端开发中，我们大部分精力都集中在屏幕显示效果（响应式、交互、性能）上。然而，对于需要导出或打印的应用场景——例如报表、合同、长篇文档或产品说明书——糟糕的打印体验可能会让用户非常抓狂。
你是否遇到过以下烦恼：

• 一个关键的图表或代码块被分页符从中间截断。
• 标题和它下面的内容分散在两页，成为难看的“孤儿”行。
• 每次打印后，都需要手动调整文档才能完整显示。

别担心，CSS 早就为我们准备了解决方案！今天我们就来深入学习控制打印分页的利器：page-break-before, page-break-inside, 和 page-break-after 属性。

属性介绍

1.page-break-inside: 保持元素的完整性

这个属性是解决内容被截断问题的核心。它决定了是否允许元素内容从内部被分页符断开。
常见属性值：

• avoid 不允许 在元素内部发生分页。保证 代码块、大型图片、表格 等关键元素不被从中间截断。
• auto 允许自动分页（默认行为）。

示例：

1
2
3
4
5
6
7
8
9

@media print {
    /* 确保代码块、表格和自定义的关键信息区在打印时是完整的 */
    pre, 
    code, 
    table, 
    .critical-info-block {
        page-break-inside: avoid;
    }
}

2. page-break-before: 强制在新页开始

该属性决定是否在元素 之前 插入分页符。
常见属性值：

• always 在元素前强制分页。 确保每个一级标题（H1）或新的章节总是在新的一页开始打印。
• avoid 尽量避免在元素前分页。 避免标题与下面的内容之间被分页。

示例：

1
2
3
4
5
6
7
8
9
10
11

@media print {
    /* 确保文档的每一个新的章节都在新的打印页开始 */
    h1 {
        page-break-before: always;
    }

    /* 确保二级标题前面不会被分页，避免标题独自一页 */
    h2 {
        page-break-before: avoid; 
    }
}

3. page-break-after: 在元素后添加断点

该属性决定是否在元素 之后 插入分页符。
常见属性值：

• always 在元素后强制分页。确保一个独立的封面页或目录页打印完毕后，正文从新的一页开始。
• avoid 尽量避免在元素后分页。避免正文内容过于分散。

示例：

1
2
3
4
5
6

@media print {
    /* 确保自定义的封面元素打印完成后，立即跳到下一页打印正文 */
    .document-cover {
        page-break-after: always;
    }
}

兼容性提醒：现代 CSS 的替代方案

虽然 page-break-* 系列属性在浏览器中的支持度很高，但它们是较旧的规范。现代 CSS 引入了更通用、功能更强大的 break-before, break-inside, 和 break-after 属性，它们不仅可以控制打印分页，还可以控制多列布局和区域的断点。为了更好的兼容性和面向未来，推荐的做法是：同时使用新旧属性:

1
2
3
4
5
6
7

@media print {
    /* 使用新旧属性确保兼容性 */
    .avoid-break-block {
        page-break-inside: avoid; /* 旧属性 */
        break-inside: avoid;      /* 新属性 */
    }
}