CSS Düzeni - Taşma
CSS overflowözelliği, bir alana sığmayacak kadar büyük olan içeriğe ne olacağını kontrol eder.
CSS Taşması
Özellik overflow, 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ının eklenip eklenmeyeceğini belirtir.
Özellik overflowaşağıdaki değerlere sahiptir:
visible- Varsayılan. Taşma kırpılmaz. İçerik, öğenin kutusunun dışında işleniyorhidden- Taşma kırpılır ve içeriğin geri kalanı görünmez olurscroll- Taşma kırpılır ve içeriğin geri kalanını görmek için bir kaydırma çubuğu eklenirauto- Benzerscroll, ancak yalnızca gerektiğinde kaydırma çubukları ekler
Not: Özellik overflowyalnı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 ("taşma: kaydırma" ayarlanmış olsa bile).
taşma: görünür
Varsayılan olarak, taşma şeklindedir visible, yani kırpılmaz ve öğe kutusunun dışında işlenir:
Örnek
div {
width: 200px;
height:
50px;
background-color: #eee;
overflow: visible;
}
taşma: gizli
Değerle hidden, taşma kırpılır ve içeriğin geri kalanı gizlenir:
Örnek
div {
overflow: hidden;
}
taşma: kaydırma
Değer olarak scrollayarlandığında, taşma kırpılır ve kutunun içinde gezinmek için bir kaydırma çubuğu eklenir. Bunun hem yatay hem de dikey olarak bir kaydırma çubuğu ekleyeceğini unutmayın (ihtiyacınız olmasa bile):
Örnek
div {
overflow: scroll;
}
taşma: otomatik
Değer autoile benzerdir scroll, ancak yalnızca gerektiğinde kaydırma çubukları ekler:
Örnek
div {
overflow: auto;
}
taşma-x ve taşma-y
ve özellikleri overflow-x, overflow-yiçeriğin taşmasını yalnızca yatay mı yoksa dikey olarak mı (veya her ikisi birden) değiştirileceğini belirtir:
overflow-xiçeriğin sol/sağ kenarlarıyla ne yapılacağını belirtir.
overflow-yiçeriğin üst/alt kenarlarıyla ne yapılacağını belirtir.
Örnek
div {
overflow-x: hidden; /* Hide horizontal scrollbar
*/
overflow-y: scroll; /* Add vertical scrollbar */
}
Tüm CSS Taşma Özellikleri
| Property | Description |
|---|---|
| overflow | Specifies what happens if content overflows an element's box |
| overflow-wrap | Specifies whether or not the browser can break lines with long words, if they overflow its container |
| overflow-x | Specifies what to do with the left/right edges of the content if it overflows the element's content area |
| overflow-y | Specifies what to do with the top/bottom edges of the content if it overflows the element's content area |