Doğuhan ELMA tarafından Layout yayınlanma tarihi
99 görünüm
break-after CSS özelliği, bir öğenin sonrasında sayfa, sütun veya bölüm kırılması nasıl olacağını kontrol eder. Bu özellik, baskı ortamları ve çok sütunlu düzenler için özellikle yararlıdır ve sayfa akışını düzenlemek, belirli bir öğeden sonra yeni bir sayfaya veya sütuna geçiş yapmak istediğinizde kullanılır.
Kullanılabilir Değerler:
auto: Standart sayfa kırılma davranışı uygulanır.
avoid: Öğeden sonra kırılma olmaması tercih edilir.
always: Öğeden sonra her zaman bir kırılma olur.
all: Hem blok hem de iç blok kırılması zorlanır.
avoid-page, page: Öğeden sonra sayfa kırılmasını kontrol eder.
avoid-column, column: Öğeden sonra sütun kırılmasını kontrol eder.
avoid-region, region: Öğeden sonra bölge kırılmasını kontrol eder (Web bölgeleri için).
Örnek Kullanım:
h2 { break-after: avoid-page; }
Bu örnekte, h2 başlığından sonra bir sayfa kırılması olmaması tercih edilir. Yani, bir h2 başlığından sonra yeni bir sayfa başlamak yerine, tarayıcı mümkün olduğunca aynı sayfada devam etmeyi tercih eder.
.article-column { break-after: column; }
Bu örnekte, .article-column sınıfına sahip bir öğeden sonra her zaman yeni bir sütuna geçilir. Bu, çok sütunlu bir düzen içinde, belirli bir öğeden sonra içeriğin yeni bir sütunda devam etmesini sağlar.
break-after özelliği, içeriklerinizi daha düzgün ve okunabilir bir şekilde düzenlemenize yardımcı olur, özellikle uzun metinler veya belgeler üzerinde çalışırken sayfa veya sütun geçişlerini kontrol etmek istediğinizde önemlidir.
break-before CSS özelliği, bir öğenin öncesinde sayfa, sütun veya bölge kırılması nasıl olacağını belirler. Bu özellik, özellikle çok sütunlu düzenlerde veya baskı ortamlarında, içerik akışını daha iyi kontrol etmek ve belirli bir öğeden önce yeni bir sayfa veya sütuna başlamak istediğinizde kullanışlıdır.
break-inside CSS özelliği, bir öğe içindeki sayfa, sütun veya bölge kırılmalarını nasıl önleyeceğinizi kontrol etmenizi sağlar. Bu özellik, çok sütunlu düzenlerde veya baskı ortamlarında, içeriğin kesintisiz bir şekilde akmasını istediğiniz zamanlar için özellikle yararlıdır. Özellikle, bir öğenin içindeki kırılmaları yönetmek için kullanılır, bu da öğenin bölünmemesi gereken durumlar için idealdir, örneğin bir paragrafın ortasında sütun kırılması olmasını önlemek veya bir tablonun bölünmemesini sağlamak.
TailwindCSS:
Break After
|
Class
|
Properties
|
|---|---|
| break-after-auto | break-after: auto; |
| break-after-avoid | break-after: avoid; |
| break-after-all | break-after: all; |
| break-after-avoid-page | break-after: avoid-page; |
| break-after-page | break-after: page; |
| break-after-left | break-after: left; |
| break-after-right | break-after: right; |
| break-after-column | break-after: column; |
Break Before
|
Class
|
Properties
|
|---|---|
| break-before-auto | break-before: auto; |
| break-before-avoid | break-before: avoid; |
| break-before-all | break-before: all; |
| break-before-avoid-page | break-before: avoid-page; |
| break-before-page | break-before: page; |
| break-before-left | break-before: left; |
| break-before-right | break-before: right; |
| break-before-column | break-before: column; |
Break Inside
|
Class
|
Properties
|
|---|---|
| break-inside-auto | break-inside: auto; |
| break-inside-avoid | break-inside: avoid; |
| break-inside-avoid-page | break-inside: avoid-page; |
| break-inside-avoid-column | break-inside: avoid-column; |
0 Yorum
Önerilen Yorumlar
Görüntülenecek yorum yok.