CSS Printing: Avoiding cut-in-half DIVs between pages?

Using break-inside should work:

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

It works on all major browsers:

Using page-break-inside: avoid; instead should work too, but has been exactly deprecated by break-inside: avoid.

page-break-inside: avoid; gave me trouble using wkhtmltopdf.

To avoid breaks in the text add display: table; to the CSS of the text-containing div.

I hope this works for you too. Thanks JohnS.

Edit: Suggest to add this within media block to not break existing styles. ie

@media print {
  div.my-div {
    display: table
  }
}

Related