CSS OVERFLOW NEDİR?

Overflow (taşma) özelliği, içerik öğesinin kutusundan taşması durumunda ne olacağını belirtir. Bu özellik, bir öğenin içeriği belirli bir alana sığmayacak kadar büyük olduğunda içeriği kırpıp kırmayacağınızı veya kaydırma çubukları ekleyip eklenmeyeceğini belirtir.

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

Taşan İçeriğin Ele Alınması

Bir öğenin içeriği kutunun kendisinin boyutlarından daha büyük olabileceği bir durum olabilir. Örneğin, verilen genişlik ve yükseklik özellikleri, öğenin içeriğini barındırmak için yeterli alan olmuyabilir.

CSS Overflow özelliği, içeriği kırpmaya, kaydırma çubuklarını oluşturma veya taşma seviyesi öğesinin, taşma içeriğini görüntülemenize izin vermenizi sağlar.

Bu özellik, visible(varsayılan), hidden, scroll, ve auto değerlerini alabilir.

CSS3 aynı zamanda dikey ve yatay kırpmanın bağımsız denetimini sağlayan özelliklerini overflow-x ve overflow-y değerleri tanımlar .

CSS Sözdizimi :

CSS overflow özelliği değerleri

• Visible :Varsayılan değer. İçerik kırpılmamış; öğenin kutusunun dışına çıkarılacak ve böylece diğer içeriklerle çakışabilecektir.
• hidden :Eleman kutusundan taşan içerik kırpılır ve içeriğin geri kalan kısmı görünmez olur.
• scroll :Taşan içerik tıpkı gizli gibi kırpılır, ancak taşan içeriğe erişmek için kaydırma mekanizması sağlar.
• auto :İçerik öğenin kutusundan taşıyorsa, içeriği geri kalanını görmek için kaydırma çubuklarını otomatik olarak sağlar, aksi takdirde kaydırma çubuğu görünmez.
• initial :Özelliğin varsayılan değeridir.
• inherit :Bu özellik, üst öğeden devralır.

overflow:visible

Öğenin kırpılmadığı ve öğenin kutunun dışına taşdığı anlamına gelir:

Örnek :

CSS :

div {
    background-color:yellow;

    width: 200px;

    height: 150px;

    overflow:visible;
    }

HTML :

<div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.
  Lorem Ipsum, adı bilinmeyen bir matbaacının </p>
</div>

ÇIKTI:

Overflow:visible varsayılı değerdir; Yani bu değeri vermesekte çıktımızın sonucu değişmeyecektir.

overflow:hidden

Hidden kelimesinin türçe karşılığı gizli, saklı demektir. Öğenin taşması kırpılır ve içeriğin geri kalanı gizlidir.

CSS :

div {
    background-color:yellow;

    width: 200px;

    height: 150px;

    overflow:hidden;
    }

HTML :

<div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.
  Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak
  üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı
  sahte metinler olarak kullanılmıştır. </p>
</div>

ÇIKTI:

overflow:scroll

Öğenin taşması kırpılır ve kutunun içinde ilerlemek için bir kaydırma çubuğu eklenir. Bunun, yatay ve dikey olarak bir kaydırma çubuğu ekleyeceğini unutmayın (buna ihtiyacınız olmasa bile ekler):

CSS :

div {
    background-color:yellow;

    width: 200px;

    height: 150px;

    overflow:scroll;
    }

HTML :

<div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.
  Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak
  üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı
  sahte metinler olarak kullanılmıştır.  </p>
</div>

ÇIKTI:

overflow:auto

Gerektiğinde sadece kaydırma çubukları ekler.

CSS :

div {
    background-color:yellow;

    width: 200px;

    height: 150px;

    overflow:auto;
    }

HTML :

<div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.
  Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak
  üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı
  sahte metinler olarak kullanılmıştır. </p>
</div>

ÇIKTI:

overflow-x ve overflow-y

Özellikleri overflow-x ve overflow-y özellikleri, taşma miktarını yatay veya dikey olarak (veya her ikisinde) değiştirip değiştirmeyeceğini belirtir:

overflow-x :Elemanın içerik alanından taşıyorsa, içeriğin sol / sağ kenarlarıyla ne yapılacağını belirtir.

overflow-y :Elemanın içerik alanından taşması durumunda içeriğin üst / alt kenarlarıyla ne yapılacağını belirtir.

CSS :

div {
    background-color:yellow;

    width: 200px;

    height: 150px;

    overflow-x: hidden;

    overflow-y: scroll;
    }

HTML :

<div>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.
  Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak
  üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı
  sahte metinler olarak kullanılmıştır.  </p>
</div>

ÇIKTI:

Global değişkenler :

/* Global values */

overflow: inherit;

overflow: initial;

overflow: unset;

inherit :Inherit anahtar sözcüğü, bir özelliğin değerini üst öğesinden devralması gerektiğini belirtir.

initial :Bir CSS özelliğini varsayılan değere ayarlamak için kullanılır.

unset :Bu anahtar kelime, özellik normal olarak devralınmışsa devralınan değeri veya özellik normal olarak devralınmazsa başlangıç ​​değerini uygular.