How to Prevent DIVs from Being Split Across Pages When Printing?

Print Issue: Preventing DIV Bifurcation Across Pages

Encountering a printing dilemma where dynamic DIVs are getting sliced in half between pages? This issue arises when trying to print lengthy documents with numerous DIV elements of variable height.

CSS Solution to the Rescue

To address this issue, the CSS property break-inside comes to the rescue. By specifying the value avoid, you can ensure that the rendering engine prevents DIVs from being split mid-way. Here's the code snippet:

@media print {
  div {
    break-inside: avoid;
  }
}

This solution is supported by all major browsers, including:

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

Alternative Option

Another viable option is to use page-break-inside: avoid; instead of break-inside: avoid;. However, this approach has been deprecated and should be used with caution.

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