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 :

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.

Ç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 :

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.

Ç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 :

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.

Ç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 :

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.

Ç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.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

6275

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.