page-break-inside：专为浏览器打印设计的CSS分页控制属性

如果你还在手动使用<br>标签或空div来控制打印分页，是时候了解这些专门为打印场景设计的CSS属性了。

核心打印控制属性

基础分页三剑客：

  • page-break-inside：控制元素内部是否允许分页
  • page-break-before：元素前是否分页
  • page-break-after：元素后是否分页

新标准属性（CSS Fragmentation）：

/* 等价写法 */
page-break-inside: avoid; → break-inside: avoid-page;
page-break-before: always; → break-before: page;

实际应用示例

@media print {
    /* 表格和图表保持完整不跨页 */
    table, figure {
        page-break-inside: avoid;
    }
    
    /* 每个章节从新页开始 */
    .chapter {
        page-break-before: always;
    }
    
    /* 标题与内容不分离 */
    h2, h3 {
        page-break-after: avoid;
    }
}

最佳实践建议

  1. 兼容性写法：
.table-print {
    page-break-inside: avoid;  /* 旧浏览器 */
    break-inside: avoid-page;  /* 新标准 */
}
  1. 段落控制：
p {
    orphans: 3;  /* 页尾至少保留3行 */
    widows: 2;   /* 页首至少保留2行 */
}

为什么不用<br>了？

过去我们这样写：

<div>第一页</div>
<br style="page-break-before: always">
<div>第二页</div>

现在更专业的做法：

<div class="page-section">第一页</div>
<div class="page-section">第二页</div>
.page-section {
    break-before: page;
}

核心优势

  • 关注点分离：打印逻辑在CSS中，不影响HTML结构
  • 响应式控制：根据内容自动适配
  • 专业精细：可控制段落断行、元素完整性
  • 标准支持：现代浏览器全面支持

对于商业文档、报表、长文等需要打印的场景，这些属性能显著提升打印质量，告别随意的<br>分页时代。

收录于知乎专栏「前端开发学习笔记实例」· 查看知乎原文