How to Prevent Dynamic DIVs from Being Split Across Pages During WebKit Printing?

Overcoming Mid-Page DIV Disruption During Printing with WebKit

When printing large documents with numerous dynamic-height DIVs, it is common to encounter the issue of DIVs being unintentionally split between pages. This can make printouts highly inconvenient and challenging to use. While CSS page break properties like page-break-before, page-break-after, and page-break-inside aim to control page breaks, they may prove ineffective in certain situations.

The Solution: Utilizing Break-Inside

The CSS property break-inside offers a reliable solution to this problem. By applying this property to the DIVs in your document, you can instruct the browser to avoid breaking them across pages.

Here's an example of how to use break-inside:

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

This CSS code specifies that the print style for all DIVs should include the break-inside: avoid rule. This tells the browser to make every effort to keep DIVs on the same page when printing.

Browser Compatibility

Fortunately, break-inside is widely supported by major browsers, including:

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

As an alternative, you can use page-break-inside: avoid instead, which has been deprecated. However, break-inside: avoid is the recommended and more widely compatible option.

By implementing this solution, you can effectively prevent your DIVs from being cut off mid-page during printing, ensuring a consistent and usable printed output.

The above is the detailed content of How to Prevent Dynamic DIVs from Being Split Across Pages During WebKit Printing?. For more information, please follow other related articles on the PHP Chinese website!