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