Tidak ada page-breakproperti sebenarnya di CSS. Hal ini sebenarnya satu set 3 sifat: page-break-before, page-break-afterdan page-break-inside. Properti ini membantu menentukan bagaimana dokumen seharusnya berperilaku saat dicetak. Misalnya, membuat dokumen cetakan lebih mirip buku.
Properti
page-break-before
The page-break-beforeproperti menambahkan halaman-break sebelum elemen yang itu diterapkan.
Catatan : properti ini sedang dalam proses untuk diganti dengan break-beforeproperti yang lebih umum . Properti baru ini juga menangani pemisah kolom dan kawasan sementara secara sintaksis kompatibel dengan page-break-before. Jadi sebelum menggunakan page-break-before, periksa apakah Anda bisa menggunakannya break-before.
Kasus penggunaan umum untuk ini adalah menerapkannya ke pemilih #commentssehingga pengguna yang mencetak halaman dengan komentar dapat dengan mudah memilih untuk mencetak seluruh dokumen tetapi berhenti sebelum komentar dengan bersih.
page-break-after
The page-break-afterproperti menambahkan halaman-break setelah elemen yang itu diterapkan.
Catatan : properti ini sedang dalam proses untuk diganti dengan break-afterproperti yang lebih umum . Properti baru ini juga menangani pemisah kolom dan kawasan sementara secara sintaksis kompatibel dengan page-break-after. Jadi sebelum menggunakan page-break-after, periksa apakah Anda bisa menggunakannya break-after.
page-break-inside
The page-break-insideproperti menambahkan halaman-break dalam elemen yang itu diterapkan.
Sintaksis
page-break-after : auto | always | avoid | left | right page-break-before : auto | always | avoid | left | right page-break-inside : auto | avoidNilai leftdan rightuntuk page-break-beforedan page-break-aftermengacu pada tata letak tersebar (seperti buku) di mana terdapat halaman kiri dan kanan yang berbeda. Mereka bekerja seperti ini:
leftmemaksa satu atau dua jeda halaman setelah elemen sehingga halaman berikutnya diformat sebagai halaman kiri.rightmemaksa satu atau dua jeda halaman setelah elemen sehingga halaman berikutnya diformat sebagai halaman yang benar.
Pertimbangkan alwayssebagai campuran keduanya. Spesifikasi mengatakan:
Agen pengguna yang sesuai dapat menafsirkan nilai 'kiri' dan 'kanan' sebagai 'selalu'.
Contoh
@media print ( h2 ( page-break-before: always; ) h3, h4 ( page-break-after: avoid; ) pre, blockquote ( page-break-inside: avoid; ) )Cuplikan kode ini melakukan 3 hal:
- itu memaksa jeda halaman sebelum semua
h2tajuk (mungkin tag h2 dalam dokumen Anda adalah judul bab yang pantas mendapatkan halaman baru) - itu mencegah jeda halaman tepat setelah sub-judul karena itu terlihat aneh
- itu mencegah jeda halaman di dalam
pretag dan kutipan tingkat blok
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Apa saja | Apa saja | Apa saja | 7+ | 4+ | TBD | TBD |
Anda dapat mencetak dari perangkat seluler, seperti AirPrint di iOS, tetapi kami belum menguji sebanyak ini. Jika ada yang memiliki data tentang dukungan, beri tahu kami.