How to Prevent DIVs from Being Cut Off During CSS Printing?

Prevent Cut-Off DIVs During CSS Printing

When generating dynamic HTML content with varying heights, it's common to encounter the problem of DIVs getting cut off between pages during printing. This issue can make printouts difficult to use.

To resolve this, try the following CSS:

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

The break-inside: avoid property prevents page breaks from occurring within DIV elements, ensuring that they print on a single page. This property is supported by all major browsers, including Chrome, Edge, Firefox, Opera, and Safari.

As an alternative, you can use page-break-inside: avoid;, which has been deprecated by break-inside: avoid but should still work.

The above is the detailed content of How to Prevent DIVs from Being Cut Off During CSS Printing?. For more information, please follow other related articles on the PHP Chinese website!