css - CSS page-break-inside：avoid; 機能しない

Question

私は、CSSpage-break-inside:avoid;が2ページの間に要素が印刷されるのを防ぐだろうとアドバイスされました。

この指示を印刷すると、これまでにテストされたすべてのブラウザで機能するわけではありません。CSS .instructionにはこれが適用されていますが、ページ間で印刷されます。

例：http ：//www.golfbrowser.com/A4/directions.php？start = PARIS＆end = SL42ES

何か案は？

Answer 1

page-break-insideプロパティは、Operaでのみサポートされています。

http://www.w3schools.com/cssref/pr_print_pagebi.asp

Answer 2

印刷スタイルシートを追加するか、メディアクエリとブレークdivを使用するか、印刷時にブレーキが必要なHTMLの要素にスタイルを追加するだけです。

壊す必要があると思われるコンテンツの長いブロックごとに、これを追加してみてください。

<div class="break">&nbsp;</div>

そしてあなたのcssに関してはこれを追加するだけです：

.break {
  display:none;
} //place inside your regular stylesheet file

@media print {
   .break {
       display:block; 
       page-break-after:always
    }
}

この方法は、IE8+を含むほとんどの最新のブラウザーで機能します。