Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menghalang DIV Dinamik daripada Dipisahkan Merentas Halaman Semasa Pencetakan WebKit?

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

DDD
Lepaskan: 2024-11-02 10:44:30
asal
1076 orang telah melayarinya

How to Prevent Dynamic DIVs from Being Split Across Pages During WebKit Printing?

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan