印刷の問題: ページ間での DIV 分岐の防止

動的 DIV がページ間で半分にスライスされるという印刷上のジレンマに遭遇しましたか?この問題は、高さが可変の DIV 要素が多数含まれる長い文書を印刷しようとすると発生します。

CSS による解決策

この問題に対処するには、CSS プロパティの Break-内側が助けになります。値回避を指定すると、レンダリング エンジンが DIV が途中で分割されるのを確実に防ぐことができます。コード スニペットは次のとおりです:

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

このソリューションは、

• Chrome 50
• Edge 12
• Firefox 65
• を含むすべての主要なブラウザでサポートされています。 ]Opera 37
• Safari 10

代替オプション

もう 1 つの実行可能なオプションは、page-break-inside を使用することです。侵入の代わりに: 回避します。ただし、このアプローチは非推奨になっているため、慎重に使用する必要があります。