打印网页的时候，如何让指定的元素另起一页（打印分页）？

在前端开发中，控制打印分页主要依靠 CSS 的 page-break 属性。 你可以用它来指定在哪个元素之前或之后插入分页符。以下几种方法可以实现指定元素另起一页：

1. page-break-before: 在元素 之前 插入分页符。

.element-to-break-before {
  page-break-before: always;
}

• always: 总是插入分页符。
• auto: 根据需要插入分页符（浏览器默认行为）。
• avoid: 避免在元素之前分页。
• left: 在左侧插入分页符（用于双面打印）。
• right: 在右侧插入分页符（用于双面打印）。

2. page-break-after: 在元素 之后 插入分页符。

.element-to-break-after {
  page-break-after: always;
}

同样支持 always, auto, avoid, left, right 等值。

3. page-break-inside: 避免元素内部出现分页符。

.element-to-avoid-break-inside {
  page-break-inside: avoid;
}

这对于表格或其他需要保持完整性的元素非常有用。 注意，avoid 并不总是有效，浏览器可能会根据内容长度和页面大小进行调整。

4. 使用 <div style="page-break-before: always;"></div> 创建空 div 分隔:

如果你不想直接修改元素的样式，可以插入一个空的 <div>，并设置其 page-break-before 或 page-break-after 属性来强制分页。

<div class="content">
  <!-- some content -->
</div>
<div style="page-break-before: always;"></div>
<div class="content">
  <!-- content that will start on a new page -->
</div>

示例：让每个 <h2> 标题另起一页：

h2 {
  page-break-before: always;
}

重要提示：

• 浏览器兼容性： 虽然 page-break 属性被广泛支持，但在不同浏览器中的表现可能略有差异。建议进行测试以确保在目标浏览器中获得预期的效果。
• 打印预览： 使用浏览器的打印预览功能可以查看分页效果，并进行调整。
• 媒体查询： 可以结合 @media print 使用 page-break 属性，使其仅在打印时生效。

@media print {
  h2 {
    page-break-before: always;
  }
}

• 复杂布局： 对于复杂的布局，可能需要结合多种方法才能实现理想的分页效果。

通过灵活运用这些方法，你可以有效地控制网页打印时的分页，并获得更清晰、易读的打印输出。