CSS break-before 属性

Definisi dan penggunaan

Sifat break-before menentukan sama ada halaman, kolom atau kawasan akan terbentuk sebelum elemen yang ditentukan.

Sifat break-before mengembangkan sifat page-break-before dalam CSS2.

Dengan menggunakan break-before, anda boleh memberitahu pelayar untuk menghentikan halaman, kolom atau kawasan sebelum elemen yang mempunyai sifat break-after, atau menghindari pemecahan elemen dan melepasi dua halaman.

Contoh

Selalu masukkan simbol halaman baru sebelum elemen <h1>:

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

CSS 语法

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 Standar. Melakukan pemisahan halaman, kolom, dan area otomatis di depan elemen.
all Selalu masukkan tanda halaman putar (page-break) segera di depan kotak utama.
always Selalu masukkan tanda halaman putar (page-break) di depan elemen.
avoid hindari pemisahan halaman, kolom, dan area di depan elemen.
avoid-column hindari pemisahan kolom di depan elemen.
avoid-page hindari pemisahan halaman di depan elemen.
avoid-region hindari pemisahan di depan elemen.
kolom Selalu masukkan simbol pemisahan kolom di depan elemen.
kiri Masukkan satu atau dua tanda halaman putar di depan elemen untuk memformat halaman berikutnya sebagai halaman kiri.
halaman Selalu masukkan tanda halaman putar di depan elemen.
recto Masukkan satu atau dua tanda halaman putar di depan kotak utama untuk memformat halaman berikutnya sebagai halaman recto.
region Selalu masukkan simbol pemisahan di depan elemen.
kanan Masukkan satu atau dua tanda halaman putar di depan elemen untuk memformat halaman berikutnya sebagai halaman kanan.
verso Masukkan satu atau dua tanda halaman putar di depan kotak utama untuk memformat halaman berikutnya sebagai halaman verso.
initial Setel atribut ini ke nilai standar. Lihat: initial.
inherit Mengambil atribut ini dari elemen induk. Lihat: inherit.

Detil teknis

Nilai standar: auto
Turunan: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi: CSS3
Syarat JavaScript: object.style.breakBefore="always"

Lebih banyak contoh

Contoh

Untuk memastikan bahwa semua bab yang baru harus mulai dari halaman yang benar (seperti di buku), 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 dalam tabel menunjukkan versi paling awal browser yang mendukung sifat ini.

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