CSS印刷：ページ間のDIVの半分を避けますか？

アイテムの大きなコレクションを取得し、それらをCocoaのWebViewのHTMLにポップするソフトウェアのプラグインを作成しています（WebKitをレンダラーとして使用しているため、基本的にこのHTMLファイルがサファリ）。

それが作成するDIVは動的な高さですが、あまり変化しません。通常は約200pxです。とにかく、ドキュメントごとにこれらのアイテムが約600あり、印刷するのに非常に時間がかかっています。運がよければ、各ページの下と上に半分に切り刻まれたエントリーがあり、実際にプリントアウトを使用するのは非常に困難です。

page-break-before、page-break-after、page-break-inside、およびこれら3つの組み合わせを試してみましたが、役に立たなかった。WebKitが命令を適切にレンダリングしていないか、それとも使い方の理解が足りないのかもしれません。とにかく、私は助けが必要です。印刷時にDIVの半分をカットしないようにするにはどうすればよいですか？

これはうまくいくはずです：

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

現在のブラウザーサポート（12-03-2014）に注意してください。

• Chrome-1.0以降
• Firefox（Gecko）-19.0以降
• Internet Explorer-8.0以降
• Opera-7.0以降
• Safari-1.3以​​降（312）

部分的なソリューションのみ：これをIEで機能させる唯一の方法は、各divを独自のテーブルにラップし、テーブルの改ページを設定して回避することでした。

page-break-inside: avoid; wkhtmltopdfの使用に問題が発生しました。

テキストの区切りを回避するdisplay: table;には、テキストを含むdivのCSSに追加します。

これがあなたにも役立つことを願っています。JohnSに感謝します。

改ページ：避けてください。確かにwebkitでは機能しません。実際、5年以上前から既知の問題でしたhttps://bugs.webkit.org/show_bug.cgi?id=5097

私の研究が行っている限り、これを達成する既知の方法はありません（私は自分のハックを理解するために取り組んでいます）

私があなたに与えることができるアドバイスは、FFでこの機能を実現するために、不要なコンテンツをラップすることです;オーバーフローでDIV（または任意のコンテナー）内でこれ以上壊したくない：auto（奇妙なスクロールバーを引き起こさないように注意してください）コンテナのサイズが小さすぎると表示されます）。

悲しいことに、FFは私がこれを達成した唯一のブラウザーであり、webkitは私がもっと心配しているブラウザーです。

page-break-afterの可能な値は次のとおりです。 auto, always, avoid, left, right

絶対配置された要素にpage-break-afterプロパティを使用することはできないと思います。

同じ問題がまだ解決していません。page-break-insideはブラウザでは機能しませんが、Operaでは機能します。別の方法として、page-break-afterを使用することもできます。一緒に保つためにdivのすべての子要素に...しかし、私のテストでは、回避属性は機能しません。Firefoxで...

すべての一般的なブラウザで機能するのは、たとえば、強制改ページです。改ページ後：常に

私が遭遇した1つの落とし穴は、 'overflow'属性が 'auto'に設定された親要素でした。これにより、印刷バージョンのpage-break-inside属性を持つ子div要素が無効になります。それ以外の場合は、page-break-inside: avoidChromeで正常に動作します。

私の場合、選択したdivをpage-break-inside：avoidに設定し、すべての要素をdisplay：inlineに設定することで、Webkitで改ページの問題を解決することができました。このように：

@media print{
* {
    display:inline;
}
script, style { 
    display:none; 
}
div {
    page-break-inside:avoid;
}

}

page-break-propertiesは（webkitの）インライン要素にのみ適用できるようです。必要な特定の要素にdisplay：inlineのみを適用しようとしましたが、これは機能しませんでした。機能したのは、すべての要素にインラインで適用することだけです。混乱を招くのは大きなコンテナーdivの1つだと思います。

たぶん誰かがこれを拡張できます。

@media print{
    /* use your css selector */    
    div{ 
        page-break-inside: avoid;
    }
}

すべての新しいブラウザでこのソリューションは機能します。caniuse.com/#search=page-break-insideを参照してください

page-break-inside: avoid;常に動作するとは限りません。コンテナ要素の高さと位置を考慮しているようです。

たとえばinline-block、ページよりも高い要素は切り取られます。

私はpage-break-inside: avoid;コンテナ要素を特定しdisplay: inline-blockて追加することで機能する機能を復元することができました：

@media print {
    .container { display: block; } /* this is key */

    div, p, ..etc { page-break-inside: avoid; }
}

これが「改ページが機能しない」と不平を言う人たちに役立つことを願っています。