CSS Taşma (Overflow)

CSS Taşma (Overflow) Özelliği

Taşma özelliği, bir öğenin içeriği belirtilen alana sığmayacak kadar büyük olduğunda içeriğin kırpılıp kırpılmayacağını veya kaydırma çubukları eklenip eklenmeyeceğini belirtir.

Taşma özelliği aşağıdaki değerlere sahiptirler:

• visible (görünür) - Varsayılandır. Taşma kırpılmaz. İçerik, öğenin kutusunun dışında işlenir.
• hidden (gizli) - Taşma kırpılır ve içeriğin geri kalanı görünmez olur.
• scroll (kaydırma) - Taşma kırpılır ve içeriğin geri kalanını görmek için bir kaydırma çubuğu eklenir.
• auto (otomatik) - Kaydırmaya benzer, ancak yalnızca gerektiğinde kaydırma çubukları ekler.

Not: Taşma özelliği yalnızca belirli bir yüksekliğe sahip blok öğeleri için çalışır.

Not: OS X Lion'da (Mac'te), kaydırma çubukları varsayılan olarak gizlenir ve yalnızca kullanıldığında gösterilir ("overflow:scroll" ayarlanmış olsa bile bu durum geçerlidir).

overflow: visible

Varsayılan olarak kullanılır, taşma görünürdür, yani kırpılmaz ve öğe sınırlarının dışında işlenir.

Örnek:

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

overflow: hidden

hidden özelliğinde, taşma kırpılır ve içeriğin geri kalanı gizlenir.

Örnek:

div {
  overflow: hidden;
}

overflow: scroll

Kaydırılacak değer ayarlandığında, taşma kırpılır ve sınırının içinde kaydırmak için bir kaydırma çubuğu eklenir. Hem yatay hem de dikey olarak bir kaydırma çubuğu ekleyeceğini unutmayın.

Örnek:

div {
  overflow: scroll;
}

overflow: auto

auto değeri kaydırmaya (scroll) benzer, ancak yalnızca gerektiğinde kaydırma çubukları ekler.

Örnek:

div {
  overflow: auto;
}

overflow-x & overflow-y

overflow-x ve overflow-y özellikleri, içeriğin taşmasının sadece yatay mı yoksa dikey mi (veya her ikisi) mi şeklinde olacağını belirtir.

overflow-x, içeriğin sol/sağ kenarlarıyla ne yapılacağını belirtir.
overflow-y, içeriğin üst/alt kenarlarıyla ne yapılacağını belirtir.

Örnek:

div {
  overflow-x: hidden; /* Yatay kaydırma çubuğunu gizler */
  overflow-y: scroll; /* Dikey kaydırma çubuğu ekler */
}