Properti break-before CSS

Definisi dan Penggunaan

Atribut break-before menentukan apakah halaman (page-break), kolom (column-break), atau area (region-break) harus terjadi sebelum elemen yang ditentukan.

Atribut break-before memperluas atribut page-break-before dalam CSS2.

Dengan menggunakan break-before, Anda dapat memberitahu peramban untuk memutuskan halaman, kolom, atau area sebelum elemen yang berisi atribut break-after, atau menghindari pemisahan elemen dan memecahkan halaman kedua.

Contoh

Selalu masukkan simbol halaman baru sebelum elemen <h1>:

@media print {
  h1 {
    break-before: always;
  }
}

CSS Grammar

break-before: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Nilai atribut

Nilai Deskripsi
auto Default. Otomatis melakukan pemformatan halaman, kolom, dan area di depan elemen.
all Selalu masukkan simbol halaman putar segera sebelum kotak utama.
always Selalu masukkan simbol halaman putar (page-break) di depan elemen.
avoid hindari gangguan halaman, kolom, atau area di depan elemen.
avoid-column hindari pemformatan kolom di depan elemen.
avoid-page hindari pemformatan halaman di depan elemen.
avoid-region hindari pemisahan di depan elemen.
column Selalu masukkan simbol pemisah kolom di depan elemen.
left Masukkan satu atau dua simbol halaman putar di depan elemen untuk mengformat halaman berikutnya menjadi halaman kiri.
page Selalu masukkan simbol halaman putar di depan elemen.
recto Masukkan satu atau dua simbol halaman putar di depan kotak utama untuk mengformat halaman berikutnya menjadi halaman recto.
region Selalu masukkan simbol pemisah di depan elemen.
right Masukkan satu atau dua simbol halaman putar di depan elemen untuk mengformat halaman berikutnya menjadi halaman kanan.
verso Masukkan satu atau dua simbol halaman putar di depan kotak utama untuk mengformat halaman berikutnya menjadi halaman verso.
initial Atur atribut ini ke nilai default. Lihat: initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat: inherit.

Detil teknis

Nilai default: auto
Inheritsi: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Atribut berhubungan dengan animasi.
Versi: CSS3
Syntax JavaScript: object.style.breakBefore="always"

Beberapa contoh lain

Contoh

Untuk memastikan bahwa semua bab baru harus mulai dari halaman yang benar saat mencetak, Anda dapat menggunakan break-before: untuk semua elemen <h1>:

@media print {
  h1 {
    break-before: right;
  }
}

Contoh

Selalu masukkan region-break: di sebelum <ul> di dalam region:

.region ul {
    break-before: region;
  }
}

Dukungan browser

Angka di tabel menandai versi browser pertama yang mendukung atribut ini penuh.

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0