Taşma

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 41 / 76.

CSS'te 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ının eklenip eklenmeyeceğini veya taşan içeriğin öğenin sınırları dışında görüntülenip görüntülenmeyeceğini belirler.

overflow özelliğini kullanmanın temel sözdizimi şöyledir:

selector {
    overflow: value;
}

value: Aşağıdakilerden biri olabilen istenen taşma davranışı:

visible: Bu varsayılan değerdir. Taşan içerik, öğenin box alanının dışında işlenir ve bitişik öğelerin üzerine gelebilir.

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

scroll: Kullanıcıların taşan içerik içinde kaydırma yapmasına olanak tanıyarak öğeye kaydırma çubukları (hem yatay hem de dikey) ekler.

auto: Tarayıcı, içeriğe ve kullanılabilir alana göre 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, genişliği 200px ve yüksekliği 100px 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önler için taşma davranışını bağımsız olarak kontrol edebilirsiniz:

.example {
    overflow-x: hidden; /* Hide horizontal overflow */
    overflow-y: scroll; /* Add a vertical scrollbar */
}

Görev

Kolay

Size, uzun bir metin içeren bir paragraf (<p>) barındıran bir <div> içeren bir HTML belgesi verilmiştir. Taşan içeriğin nasıl görüntüleneceğini denetlemek için overflow özelliğini kullanma görevinizdir. 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.

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>