box-decoration-break CSS özelliği, bir inline öğe (örneğin, bir <span> veya inline <div>) birden fazla satıra veya sütuna bölündüğünde, öğenin dekoratif özelliklerinin (arka plan, kenarlık, marjlar, dolgular) nasıl uygulanacağını kontrol eder. Bu özellik, özellikle çok satırlı inline öğeler veya sütunlara bölünmüş metinlerle çalışırken, dekorasyonun bölümler arasında nasıl davranacağını belirlemenize olanak tanır. Özellik iki ana değer alır:

slice: Bu değer, öğenin her bir bölümünün (örneğin, bir satıra veya sütuna bölünmüş metin) ayrı bir kutu olarak ele alınmasını ve her birine dekorasyonun (arka plan, kenarlık vb.) bağımsız olarak uygulanmasını sağlar. Bu, varsayılan davranıştır.

clone: Bu değer, öğenin her bölümüne öğenin tamamıymış gibi dekorasyonun uygulanmasını sağlar. Bu, örneğin, bir arka plan görüntüsünün veya renginin her satırda yeniden başlamasını sağlayabilir.

Örnek Kullanım:

.multiline-span {
  box-decoration-break: clone;
  background-color: lightblue;
  border: 1px solid blue;
  padding: 5px;
}

Bu örnekte, .multiline-span sınıfına sahip bir öğe çok satırlı ise (yani içeriği bir satırı aşıp yeni bir satıra geçiyorsa), her satır kendi başına bir kutu gibi davranır ve background-color, border ve padding gibi dekoratif özellikler her satıra bağımsız olarak uygulanır. clone değeri sayesinde, her satır öğenin tamamıymış gibi aynı dekorasyona sahip olur. Bu, metin kutularının, etiketlerin veya diğer dekoratif elementlerin görsel tutarlılığını korumak için kullanışlı bir yoldur.

TailwindCSS: