CSS break-inside özelliği

Tanım ve kullanım

break-inside özelliği, belirtilen element içinde sayfa (page-break), sütun (column-break) veya bölge (region-break) bölme olup olmadığını belirler.

break-inside özelliği, CSS2'nin page-break-inside özelliğini genişletir.

break-inside kullanarak, tarayıcıya görüntü, kod parçası, tablo ve liste içinde kesintilere izin vermeyi belirtebilirsiniz.

Örnek

<img> elementi içinde sayfa bölmesini önleyin:

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

CSS dilbilgisi

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

Özellik değeri

Değer Açıklama
auto Varsayılan. Element içinde otomatik olarak sayfa, sütun, bölme yapılır.
avoid Element içinde sayfa, sütun, bölge kesintilerini önleyin.
avoid-column Element içinde sütun bölmesini önleyin.
avoid-page Element içinde sayfa bölmesini önleyin.
avoid-region Element içinde bölme yapmayı önleyin.
initial Bu özelliği varsayılan değerine ayarlayın. Bakınız initial。
inherit Bu özelliği, ebeveyn elementinden kalıtım alır. Bakınız inherit。

Teknik ayrıntılar

Varsayılan değer: auto
Kalıtım: Hayır
Animasyon yapımı: Desteklenmiyor. Bakınız:Animasyonla ilgili özellikler。
Sürüm: CSS3
JavaScript dilbilgisi: object.style.breakInside="always"

Daha fazla örnek

avoid-page, <table>, <ul>, <ol> elementleri içinde sayfa bölme:

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

Tarayıcı desteği

Tablo içindeki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

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