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


199

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?


Berikan dokumen sampel dengan masalah yang Anda lihat dan mungkin kami dapat membantu!
X-Istence

Saya menjawab pertanyaan yang sangat mirip tentang menghindari memotong divs di sini: stackoverflow.com/a/14348953/1026459
Travis J

1
Catatan: Properti ini TIDAK dapat digunakan pada elemen yang benar-benar diposisikan (dan tampaknya juga pada blok inline).
Ujjwal Singh

Jawaban:


336

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)

7
Itu harus bekerja. Tapi ternyata tidak. Lihat en.wikipedia.org/wiki/… untuk dukungan browser.
Greg

1
Bekerja di Safari 6 :) yang ada di pratinjau pengembang sekarang
Linus Unnebäck

1
Bekerja di Chrome V 27.0.1453.116
T. Brian Jones

4
Bekerja di Netscape juga. Terima kasih!

2
Mengapa Anda perlu media cetak? Apakah sama jika media cetak tidak digunakan dan aturan diterapkan langsung pada div?
FrenkyB

21

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.


@ Easwee: terima kasih. Downvote terjadi pada saat yang sama inquisitive_web_developer memberi hadiah pada pertanyaan. Dugaan saya adalah bahwa dia tidak menyukainya. ;)
NotMe

3
Cantik! Anda seorang juara; Saya telah mencari cara untuk melakukan ini di wkhtmltopdf , yang tidak mendukung page-break-inside: avoid;dengan benar. Akhirnya saya punya solusi yang layak.
Dave

2
Diuji halaman-break-inside di wkhtmltopdf di versi 0.11 dan berhasil.
cmc

Diuji dengan wkhtmltopdf 0.12.2.1. Div di dalam tabel tidak lagi diperlukan, cukup masukkan page-break-inside: hindari pemilih div. Bekerja!
Paul Marti

12

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.


Saya hampir menyerah pada ruang-ruang yang tidak dapat dijelaskan yang muncul di sana-sini saat menggunakan page-break-before: always;pada <div>elemen. Mencari melalui samudera Posting SO, artikel, dokumen resmi dan yang lainnya. Tidak ada yang membantu. Tetapi Anda, teman saya, akhirnya datang dengan apa yang sebenarnya saya butuhkan! Tidak bisa cukup berterima kasih, kawan !! Saya berharap saya bisa memberi Anda kopi setidaknya, banyak cinta dari India!
Jay Dadhania

6

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.


5

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.


1
Tampaknya itu tidak bekerja pada inline-blocks baik
Ujjwal Singh

5

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


Ini harus bekerja dengan Webkit. Namun Anda mungkin perlu memasukkan beberapa div tambahan yang ditata untuk dicetak dengan page-break-after: always; setelah ~ setengah lusin div reguler Anda.
ʍǝɥʇɐɯ

3

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.


2

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.


1
@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


1

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".

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.