Properti break-inside CSS

Definisi dan penggunaan

Atribut break-inside menentukan apakah pemisahan halaman (page-break), pemisahan kolom (column-break), atau pemisahan area (region-break) harus terjadi di dalam elemen yang ditentukan.

Atribut break-inside ekspandir atribut page-break-inside CSS2.

Dengan menggunakan break-inside, Anda dapat memberitahu browser untuk menghindari pemisahan di dalam gambar, kode snippet, tabel, dan daftar.

Contoh

hindari pemisahan halaman di dalam elemen <img>:

@media print {
  img {
    display: block;
    break-inside: avoid;
  }
}

语法 CSS

break-inside: 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. Halaman, kolom, dan area otomatis dipisahkan di dalam elemen.
avoid hindari pemunculan pemisahan halaman, kolom, atau area di dalam elemen.
avoid-column hindari pemisahan kolom dalam elemen.
avoid-page hindari pemisahan halaman dalam elemen.
avoid-region hindari pemisahan area dalam elemen.
initial Atur atribut ini ke nilai default. Lihat initial。
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit。

Detil teknis

Nilai default: auto
Warisan: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Atribut berhubungan dengan animasi。
Versi: CSS3
语法 JavaScript: object.style.breakInside="always"

Contoh lebih banyak

hindari halaman antara elemen <table>、<ul>、<ol>:

@media print {
  table, ul, ol {
    break-inside: avoid;
  }
}

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung atribut ini penuhnya.

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