如何防止動態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中文網其他相關文章！