如何防止动态DIV在WebKit打印过程中跨页面拆分？

克服使用 WebKit 打印期间页中 DIV 中断

打印具有大量动态高度 DIV 的大型文档时，很常见DIV 无意中在页面之间分割的问题。这会使打印输出非常不方便且难以使用。虽然 CSS 分页符属性（例如 page-break-before、page-break-after 和 page-break-inside）旨在控制分页符，但它们在某些情况下可能无效。

解决方案：利用 Break-Inside

CSS 属性break-inside 为这个问题提供了可靠的解决方案。通过将此属性应用于文档中的 DIV，您可以指示浏览器避免跨页面中断它们。

以下是如何使用内部中断的示例：

<code class="css">@media print {
  div {
    break-inside: avoid;
  }
}</code>

This CSS 代码指定所有 DIV 的打印样式应包含break-inside：避免规则。这告诉浏览器在打印时尽一切努力将 DIV 保持在同一页面上。

浏览器兼容性

幸运的是，break-inside 得到了主流浏览器的广泛支持，包括：

• Chrome 50
• Edge 12
• Firefox 65
• Opera 37
• Safari 10

作为替代方案，您可以使用 page-break-inside:void 代替，该方法已被弃用。不过，break-inside:void 是推荐的且兼容范围更广的选项。

通过实施此解决方案，您可以有效防止 DIV 在打印过程中被切断，从而确保一致且可用的打印输出.

以上是如何防止动态DIV在WebKit打印过程中跨页面拆分？的详细内容。更多信息请关注PHP中文网其他相关文章！