Bagaimana untuk Menghalang DIV Dinamik daripada Dipisahkan Merentas Halaman Semasa Pencetakan WebKit?

Mengatasi Gangguan DIV Pertengahan Halaman Semasa Mencetak dengan WebKit

Apabila mencetak dokumen besar dengan banyak DIV berketinggian dinamik, perkara biasa ditemui isu DIV dipecahkan secara tidak sengaja antara halaman. Ini boleh menjadikan cetakan sangat menyusahkan dan mencabar untuk digunakan. Walaupun sifat pemisah halaman CSS seperti page-break-before, page-break-after dan page-break-inside bertujuan untuk mengawal pemisah halaman, mereka mungkin terbukti tidak berkesan dalam situasi tertentu.

Penyelesaian: Menggunakan Break-Inside

Properti CSS break-inside menawarkan penyelesaian yang boleh dipercayai untuk masalah ini. Dengan menggunakan sifat ini pada DIV dalam dokumen anda, anda boleh mengarahkan penyemak imbas untuk mengelak daripada memecahkannya merentasi halaman.

Berikut ialah contoh cara menggunakan pecah-dalam:

<code class="css">@media print {
  div {
    break-inside: avoid;
  }
}</code>

Ini Kod CSS menentukan bahawa gaya cetakan untuk semua DIV harus mengandungi peraturan pecah dalam: elakkan. Ini memberitahu penyemak imbas untuk berusaha sedaya upaya untuk memastikan DIV pada halaman yang sama semasa mencetak.

Keserasian Pelayar

Nasib baik, pecah-dalam disokong secara meluas oleh penyemak imbas utama, termasuk:

• Chrome 50
• Edge 12
• Firefox 65
• Opera 37
• Safari 10

Sebagai alternatif, anda boleh menggunakan page-break-inside: sebaliknya elakkan, yang telah ditamatkan. Walau bagaimanapun, pecah masuk: elak adalah pilihan yang disyorkan dan lebih serasi secara meluas.

Dengan melaksanakan penyelesaian ini, anda boleh menghalang DIV anda daripada terputus pertengahan halaman dengan berkesan semasa mencetak, memastikan output cetakan yang konsisten dan boleh digunakan .

Atas ialah kandungan terperinci Bagaimana untuk Menghalang DIV Dinamik daripada Dipisahkan Merentas Halaman Semasa Pencetakan WebKit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!