CSS overflow ile Taşan Alanı Kesme

overflow ile yazıların, resimlerin belirlediğimiz alan (örneğin; div) içerisinden taşması durumunda ne yapılacağını belirler. word-wrap ile karıştırılmaması gerekir. overflow birden fazla değer alabilir; visible, hidden, scroll ve auto. Bütün değerlerin kendisine has özellikleri vardır.

Syntax

overflow:scroll;       
overflow:hidden;
overflow:visible;
overflow:auto;

1) scroll

Tanımladığınız alan içinde taşan kısımlar kesilir ancak taşan kısımların görünmesi için hem yatay hem dikey kaydırma çubukları oluşturur (scrollbar).

CSS Kodu

div
{
    background-color:#00FF00;
    width:120px;
    height:80px;
    overflow:scroll;       
}

HTML Kodu

<div>Bu alanı daha iyi kontrol etmek istiyorsanız overflow özelliğini kullanabilirsiniz.</div>

2) hidden

Tanımladığınız alan içinde taşan kısımlar kesilir ve taşan kısımlar bu alandan atılır.

CSS Kodu

div 
{
    background-color:#00FF00;
    width:120px;
    height:80px;
    overflow:hidden;
}

HTML Kodu

<div>Bu alanı daha iyi kontrol etmek istiyorsanız overflow özelliğini kullanabilirsiniz.</div>

3) visible

Tanımladığınız alan içinde taşan kısımlar kesilmez ve bütün içerik gösterilir.

CSS Kodu

div 
{
    background-color:#00FF00;
    width:120px;
    height:80px;
    overflow:visible;
}

HTML Kodu

<div>Bu alanı daha iyi kontrol etmek istiyorsanız overflow özelliğini kullanabilirsiniz.</div>

4) auto

Eğer tanımladığınız alan içinde taşan kısımlar varsa kesilir ancak taşan kısımların görünmesi için hem yatay hem dikey kaydırma çubukları oluşturur (scrollbar).

CSS Kodu

div 
{
    background-color:#00FF00;
    width:120px;
    height:80px;
    overflow:auto;
}

HTML Kodu

<div>Bu alanı daha iyi kontrol etmek istiyorsanız overflow özelliğini kullanabilirsiniz.</div>