WebKit 印刷中に動的 DIV がページ間で分割されないようにする方法は?

WebKit を使用した印刷中のページ途中での DIV の中断を克服する

多数のダイナミックハイト DIV を含む大きなドキュメントを印刷する場合、一般的に次のような問題が発生します。 DIV がページ間で意図せず分割される問題。これにより、印刷出力が非常に不便で使いにくくなる可能性があります。 page-break-before、page-break-after、page-break-inside などの CSS 改ページ プロパティは改ページを制御することを目的としていますが、特定の状況では効果がないことが判明する場合があります。

解決策:ブレークインサイドの利用

CSS プロパティ ブレークインサイドは、この問題に対する信頼できる解決策を提供します。このプロパティをドキュメント内の DIV に適用すると、ページ間で DIV が分割されないようブラウザに指示できます。

ブレークインサイドの使用方法の例を次に示します。

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

これCSS コードは、すべての DIV の印刷スタイルに Break-inside: 回避ルールを含める必要があることを指定します。これにより、印刷時に DIV を同じページに維持するようあらゆる努力を払うようブラウザに指示されます。

ブラウザの互換性

幸いなことに、ブレークインサイドは主要なブラウザで広くサポートされています。含む:

• Chrome 50
• エッジ12
• Firefox 65
• Opera 37
• Safari 10

代わりに、page-break-inside:avoid を使用できます。これは廃止されました。ただし、ブレークインサイド: 回避が推奨されており、より広範囲で互換性のあるオプションです。

このソリューションを実装すると、印刷中に DIV がページの途中で切れるのを効果的に防ぎ、一貫性のある使用可能な印刷出力を保証できます。 .

以上がWebKit 印刷中に動的 DIV がページ間で分割されないようにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。