[解決済み】CSS印刷。ページ間で半分にカットされたDIVを避けるには？

質問

私は、アイテムの大きなコレクションを取得し、CocoaのWebView（レンダラーとしてWebKitを使用するので、基本的にこのHTMLファイルはSafariで開かれていると仮定することができます）にHTMLにそれらをポップアップするソフトウェアの一部のためのプラグインを書いています。

DIVの高さはダイナミックに変化するが、それほど大きくは変化しない。通常は200px前後だ。とにかく、このようなアイテムが1つのドキュメントに600個ほどあるため、印刷するのにとても苦労しているのです。運が良くないと、すべてのページの下と上に半分に切り取られた項目があり、実際に印刷物を使うのは非常に困難です。

page-break-before, page-break-after, page-break-inside, and combination of the threeを試しましたが、効果がありません。WebKitが説明書を正しくレンダリングしてくれないのか、それとも私の理解不足なのか、どちらなんでしょう。ともかく、助けてほしい。印刷時にDIVが真っ二つになるのを防ぐにはどうしたらいいでしょうか？

解決方法を教えてください。

使用方法 ブレイクインサイド が動作するはずです。

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

で動作します。 主要ブラウザ :

• クローム50以上
• エッジ 12+
• Firefox 65 以上
• オペラ 37 以上
• サファリ 10以上

使用方法 page-break-inside: avoid; も動作するはずですが、これまで まさに非推奨 によって break-inside: avoid .