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 :

overflow: visible | hidden | scroll | auto | initial | inherit;

CSS overflow özelliği değerleri

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:

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







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:

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.


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:

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.


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:

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.


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:

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.


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.

Mehmet Akif Sert 01/06/2021

Bir şey ararken kendimi her defasında "Sarı W Faviconlu" şu sitede buluyorum neredeyse. Bu da kalitenin göstergesi olsa gerek. Tebrik ediyorum
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

5186

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.