web-dev-qa-db-ja.com

CSS印刷：ページ間の半分に分割されたDIVを回避しますか？

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

それが作るDIVは動的な高さですが、あまり変化しません。通常は約200ピクセルです。とにかく、ドキュメントごとにこれらのアイテムの約600で、私はそれを印刷するのに非常に苦労しています。運がよければ、すべてのページの下部と上部にエントリが半分に切り刻まれているため、実際に印刷物を使用するのは非常に困難です。

改ページ前、改ページ後、改ページ内、およびこれら3つの組み合わせを使用しようとしました。 WebKitが指示を適切にレンダリングしていないのかもしれません。または、指示の使用方法が理解できないのかもしれません。とにかく、私は助けが必要です。印刷するときに、DIVの半分をカットしないようにするにはどうすればよいですか？

csscocoaprintingpage-break
173
joeylange

これは動作するはずです：

@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）
302
Dmitri Farkov

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

21
NotMe

page-break-inside: avoid;はwkhtmltopdfの使用で問題を引き起こしました。

テキストが途切れないようにするには、テキストを含むdivのCSSにdisplay: table;を追加します。

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

9
Bonjowi

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

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

私があなたに与えることができるアドバイスは、FFでこの機能を達成するために、あなたがしないコンテンツをラップすることです.DIV（または任意のコンテナ）内でオーバーフローすることは決して避けたくないです：autoコンテナのサイズを小さくしすぎると表示されます）。

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

5
Bob Monteverde

私には同じ問題がありますが、まだ解決策はありません。 page-break-insideはOperaではなくブラウザでは機能します。別の方法として、divのすべての子要素でpage-break-after：avoid;を使用してtogehter ...を保持することもできますが、私のテストでは、例えば、回避属性は機能しません。 Firefoxで...

すべてのppularブラウザで機能するのは、たとえば改ページ後：常に

5
Bjoern

改ページの可能な値は次のとおりです。auto, always, avoid, left, right

絶対に配置された要素には改ページ後プロパティを使用できないと思います。

5
DOK

私が遭遇した落とし穴の1つは、「overflow」属性が「auto」に設定されている親要素でした。これは、印刷バージョンのpage-break-inside属性を持つ子div要素を無効にします。それ以外の場合、page-break-inside: avoidはChromeで正常に機能します。

3
Eric D.

私の場合、選択した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つだと思います。

誰かがこれを拡張できるかもしれません。

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

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

0
Naun Lemos