Mencetak CSS: Menghindari DIV cut-in-half antar halaman?

Saya sedang menulis plug-in untuk perangkat lunak yang mengambil banyak koleksi item dan memunculkannya ke HTML di WebView di Cocoa (yang menggunakan WebKit sebagai renderernya, jadi pada dasarnya Anda dapat mengasumsikan file HTML ini dibuka di Safari).

DIV yang dibuatnya memiliki ketinggian dinamis, tetapi tidak terlalu bervariasi. Mereka biasanya sekitar 200px. Ngomong-ngomong, dengan sekitar enam ratus item ini per dokumen, saya mengalami kesulitan untuk mencetaknya. Kecuali jika saya beruntung, ada entri yang dipotong menjadi dua di bagian bawah dan atas setiap halaman, dan itu membuat cetakan yang benar-benar menggunakan sangat sulit.

Saya sudah mencoba page-break-before, page-break-after, page-break-inside, dan kombinasi ketiganya tetapi tidak berhasil. Saya pikir itu mungkin WebKit tidak memberikan instruksi dengan benar, atau mungkin saya kurang memahami cara menggunakannya. Bagaimanapun, saya butuh bantuan. Bagaimana saya bisa mencegah pemotongan DIV saya saat mencetak?

Ini seharusnya bekerja:

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

Harap perhatikan dukungan browser saat ini (12-03-2014) :

• Chrome - 1.0+
• Firefox (Gecko) - 19.0+
• Internet Explorer - 8.0+
• Opera - 7.0+
• Safari - 1.3+ (312)

Hanya solusi parsial: Satu-satunya cara saya bisa mendapatkan ini bekerja untuk IE adalah untuk membungkus setiap div di tabel itu sendiri dan mengatur page-break-inside di atas meja untuk menghindari.

page-break-inside: avoid; memberiku masalah menggunakan wkhtmltopdf.

Untuk menghindari jeda dalam teks, tambahkan display: table;ke CSS dari div yang mengandung teks.

Saya harap ini bekerja untuk Anda juga. Terima kasih johns.

page-break-inside: avoid; pasti tidak berfungsi di webkit, sebenarnya telah menjadi masalah yang diketahui selama 5+ tahun sekarang https://bugs.webkit.org/show_bug.cgi?id=5097

Sejauh penelitian saya telah berjalan, tidak ada metode yang diketahui untuk mencapai ini (saya sedang bekerja mencari tahu hack saya sendiri)

Saran yang bisa saya berikan kepada Anda adalah, untuk mencapai fungsi ini dalam FF, bungkus konten yang tidak ingin Anda hancurkan di dalam DIV (atau wadah apa pun) dengan overflow: otomatis (hati-hati jangan sampai menyebabkan bilah gulir yang aneh untuk muncul dengan mengukur ukuran wadah terlalu kecil).

Sayangnya, FF adalah satu-satunya browser yang berhasil saya selesaikan, dan webkit adalah yang paling saya khawatirkan.

Nilai yang mungkin untuk penghentian halaman adalah: auto, always, avoid, left, right

Saya percaya bahwa Anda tidak dapat menggunakan properti break-after thie ini pada elemen yang benar-benar diposisikan.

Saya memiliki masalah yang sama tetapi belum ada solusi. page-break-inside tidak berfungsi di browser tetapi Opera. Alternatifnya mungkin menggunakan penghentian halaman: hindari; pada semua elemen anak dari div untuk menjaga togehter ... tetapi dalam pengujian saya, atribut Hindari-tidak berfungsi misalnya. di Firefox ...

Apa yang bekerja di semua browser puler dipaksa menggunakan page break misalnya. page-break-after: selalu

Salah satu perangkap yang saya temui adalah elemen induk yang atributnya 'melimpah' disetel ke 'otomatis'. Ini meniadakan elemen div anak dengan atribut pembobolan halaman dalam versi cetak. Kalau tidak, page-break-inside: avoidberfungsi dengan baik di Chrome untuk saya.

Dalam kasus saya, saya berhasil memperbaiki kesulitan page break di webkit dengan mengatur div yang saya pilih ke page-break-inside: avoid, dan juga mengatur semua elemen untuk ditampilkan: inline. Jadi seperti ini:

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

}

Sepertinya page-break-properties hanya dapat diterapkan pada elemen inline (di webkit). Saya mencoba untuk hanya menerapkan tampilan: sesuai dengan elemen tertentu yang saya butuhkan, tetapi ini tidak berhasil. Satu-satunya hal yang berhasil adalah menerapkan inline ke semua elemen. Saya kira itu salah satu dari wadah besar yang mengacaukan segalanya.

Mungkin seseorang bisa mengembangkan ini.

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

Untuk semua browser baru, solusi ini berfungsi. Lihat caniuse.com/#search=page-break-inside

page-break-inside: avoid;sepertinya tidak selalu berhasil. Tampaknya memperhitungkan ketinggian dan posisi elemen kontainer.

Misalnya, inline-blockelemen yang lebih tinggi dari halaman akan terpotong.

Saya dapat mengembalikan page-break-inside: avoid;fungsionalitas kerja dengan mengidentifikasi elemen kontainer dengan display: inline-blockdan menambahkan:

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

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

Semoga ini bisa membantu orang yang mengeluh bahwa "page-break-inside tidak berfungsi".