Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS break-* Özellikleri ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

50 views

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 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...