CSS break-before özelliği

Tanım ve Kullanım

break-before özelliği, belirtilen öğe önünde sayfa (page-break), sütun (column-break) veya bölge (region-break) olup olmayacağını belirler.

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

break-before kullanarak, tarayıcıya sayfa, sütun veya bölgeyi kesmek veya öğeyi iki sayfaya bölmemek için kesmeyi bildirebilirsiniz.

Örnekler

Her zaman <h1> öğesi önüne sayfa ayrımı ekle:

@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;

Özellik değeri

Değer Açıklama
auto Varsayılan. Elementin önünde otomatik olarak sayfa, sütun, bölme yapılır.
all Her zaman başlık çerçevesi önüne hemen bir sayfa simgesi ekleyin.
always Her zaman elementin önüne sayfa simgesi (page-break) ekleyin.
avoid Elementin önünde sayfa, sütun, bölge kesintilerinden kaçının.
avoid-column Elementin önünde sütun yapmaktan kaçının.
avoid-page Elementin önünde sayfa yapmaktan kaçının.
avoid-region Elementin önünde bölme yapmaktan kaçının.
sütun Her zaman elementin önüne bir sütun simgesi ekleyin.
sol Sonraki sayfayı sol sayfa olarak formatlamak için elementin önüne bir veya iki sayfa simgesi ekleyin.
sayfa Her zaman elementin önüne bir sayfa simgesi ekleyin.
recto Sonraki sayfayı recto sayfası olarak formatlamak için başlık çerçevesi önüne bir veya iki sayfa simgesi ekleyin.
bölge Her zaman elementin önüne bir bölme simgesi ekleyin.
sağ Sonraki sayfayı sağ sayfa olarak formatlamak için elementin önüne bir veya iki sayfa simgesi ekleyin.
verso Sonraki sayfayı verso sayfası olarak formatlamak için başlık çerçevesi önüne bir veya iki sayfa simgesi ekleyin.
initial Bu özelliği varsayılan değerine ayarlayın. Bakınız initial。
inherit Bu özelliği, ebeveyn elementinden bu özelliği devralır. Bakınız inherit。

Teknik ayrıntılar

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

Daha fazla örnek

Örnekler

Tüm yeni bölümlerin yazdırılırken doğru sayfadan (örneğin, kitapta) başlamasını sağlamak için tüm <h1> elementlerine break-before: kullanabilirsiniz:

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

Örnekler

Her zaman region içindeki <ul> öncesine bir region-break: ekle:

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

Tarayıcı desteği

Tablodaki 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