Page break

break-before, break-after, break-inside özelliklerini öğrenirsin.

break özellikleri

Yazdırırken bir öğenin öncesi, sonrası ya da içi için sayfa kırılımı davranışı verirsin. Üç özellik: break-before, break-after ve break-inside. Değerleri page, avoid ya da auto olur.

Örneğin h1 { break-before: page; } her birinci düzey başlığı yeni bir sayfada başlatır. table { break-inside: avoid; } bir tablonun ikiye bölünmesini engeller.

break-inside: avoid

Bir öğenin iki sayfaya bölünmesini istemediğin zaman break-inside: avoid kullanırsın. Sık kullanılan yerler: alıntı blokları, küçük tablolar, figürler. Tarayıcı öğeyi tek parça tutmaya çalışır; sığmazsa yeni sayfaya taşır.

Çok uzun öğelerde bu davranışa uyulamaz: sığmayan bir tablo yine bölünür. Kısa ve bölünmesi çirkin görünen bloklar için uygundur.

Uygulama Bölünmeyen fatura tablosu yaz

.invoice-table seçicisi için break-inside: avoid bildirimi yaz. Aynı blokta width: 100% da tanımlansın. İki bildirimi de içersin.

Örnek çözümü göster

/* bölünmeyen fatura tablosu */
.invoice-table {
  break-inside: avoid;
  width: 100%;
}

Kendini test et

break-before: page ne yapar?
```
h1 { break-before: page; }
```
- Başlığın rengini değiştirir
- Öğeden önce yeni bir sayfa açar
- Başlığı tamamen gizler
- Başlığın yazısını kalın yapar
Cevabı göster

Öğeden önce yeni bir sayfa açar — Doğru. break-before: page öğeden önce yeni bir sayfa başlatır.

Figürü bölünmez yap

figure {
  ____;
}

Cevabı göster

figure {
  break-inside: avoid;
}

Eski page-break-* ve yeni break-* arasındaki fark nedir?
- page-break-* yalnızca ekranda çalışır, break-* yalnızca yazdırırken
- İkisi tamamen farklı davranır, hiçbir ilişkisi yoktur
- break-* çoklu sütun ve sayfa için ortak; page-break-* eski yazılımda kalmıştır
- break-* yalnızca mobil cihazlarda çalışır
Cevabı göster

break-* çoklu sütun ve sayfa için ortak; page-break-* eski yazılımda kalmıştır — Doğru. break-* ailesi sütun ve sayfa kırılımını birlikte denetler; page-break-* eski karşılığıdır.
Her break özelliğini etkisine eşle

break-before: page

Önce yeni sayfa
break-after: page

Sonra yeni sayfa
break-inside: avoid

Bölünmeyi engeller
break-before: avoid

Önce kırılımı engeller

Sıradaki ders: Print medya

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler