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>
YORUMLAR