Taşma

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 41 / 76.

CSS'de, overflow özelliği bir öğenin kutusundan taşan içeriğe ne olacağını kontrol eder. Bir öğenin içeriği belirtilen genişlik ve yüksekliğe sığmayacak kadar büyük olduğunda, overflow özelliği içeriğin kırpılıp kırpılmayacağını, kaydırma çubukları eklenip eklenmeyeceğini veya taşan içeriğin öğenin sınırlarının dışında görüntülenip görüntülenmeyeceğini belirler.

İşte overflow özelliğini kullanmak için temel sözdizimi:

selector {
    overflow: value;
}

value: İstenen taşma davranışı, aşağıdakilerden biri olabilir:

visible: Bu varsayılan değerdir. Taşan içerik, öğenin kutusunun dışında işlenir ve bitişik öğelerle örtüşebilir.

hidden: Taşan içerik kırpılır ve içeriğin geri kalanı görünmezdir.

scroll: Öğeye kaydırma çubukları (hem yatay hem de dikey) ekleyerek kullanıcıların taşan içerik içinde gezinmesine olanak tanır.

auto: Tarayıcı, içeriğe ve kullanılabilir alana bağlı olarak kaydırma çubuklarının eklenip eklenmeyeceğini belirler. Genellikle kaydırma çubukları yalnızca gerektiğinde eklenir.

Örneğin:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

Bu örnekte, 200px genişliğinde ve 100px yüksekliğinde olan tüm <div> öğelerine, taşan içeriği görüntülemek için kaydırma çubukları eklenecektir.

Ayrıca overflow-x ve overflow-y özelliklerini kullanarak yatay ve dikey yönlerdeki taşma davranışını bağımsız olarak kontrol edebilirsiniz:

.example {
    overflow-x: hidden; /* Yatay taşmayı gizle */
    overflow-y: scroll; /* Dikey bir kaydırma çubuğu ekle */
}

Görev

Kolay

Uzun bir metin içeren bir paragraf (<p>) barındıran bir bölüm (<div>) içeren bir HTML belgesi size verilmiştir. Göreviniz, taşan içeriğin nasıl görüntüleneceğini kontrol etmek için overflow özelliğini kullanmaktır. Aşağıdaki adımları izleyin:

<div> öğesini hedefleyen bir CSS kuralı yazın. width değerini 300px, height değerini 150px ve border değerini 1px solid black olarak ayarlayın.
Öğeye kaydırma çubukları eklemek için <div> öğesinin overflow özelliğini scroll olarak ayarlayın.

Kopya kağıdı

overflow özelliği, öğesinin kutusundan taşan içeriğe ne olacağını kontrol eder:

selector {
    overflow: value;
}

Taşma (Overflow) değerleri:

visible: Varsayılan. İçerik, öğenin kutusunun dışına taşar
hidden: Taşan içerik kırpılır ve görünmez
scroll: Kaydırma çubukları ekler (yatay ve dikey)
auto: Tarayıcı, kaydırma çubuklarını yalnızca gerektiğinde ekler

Örnek:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

Yatay ve dikey taşmayı bağımsız olarak kontrol edin:

.example {
    overflow-x: hidden; /* Yatay taşmayı gizle */
    overflow-y: scroll; /* Dikey kaydırma çubuğu ekle */
}

Kendin dene

<html>
<head>
    <title>Overflow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>
        <p>This is a long text that will likely overflow its container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>