overflow-x
Bu özellik ile bir elemanın içeriğinin yatay yönde taşan kısımlarının nasıl görüntüleneceği ayarlanır. Varsayılan değer visible değeridir ve taşan içeriğin eleman dışında görüntülenmesine sebep olur. hidden değeri taşan içeriği görünmez yapar. scroll değerinde ise içeriğin taşan kısımlarının da görüntülenebilmesi için kaydırma çubukları oluşturulur. auto değeri ise bu seçimi tarayıcıya bırakır. Tarayıcıların geneli auto değerinde de scroll değerindeki uygulamayı kullanır. Bu özellik ile yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Taşmalar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
overflow-x:visible;
}
p.ornek2{
overflow-x:hidden;
}
p.ornek3{
overflow-x:scroll;
}
p.ornek4{
overflow-x:auto;
}
p{
width: 200px;
height: 40px;
white-space: pre;
border: 1px solid red;
}
</style>
</head>
<body>
<p class="ornek1">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p><br>
<p class="ornek2">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p><br>
<p class="ornek3">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p><br>
<p class="ornek4">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p><br>
</body>
</html>
overflow-y
Bu özelliğin kullanımı da overflow-x özelliğinin kullanımı ile aynıdır. Girilebilecek değerler ve etkileri aynı olmakla birlikte overflow-y dikey taşmaların nasıl görüntüleneceğini belirler. Bu özellikle yapılan biçimlendirmeler de alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Taşmalar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
overflow-y:visible;
}
p.ornek2{
overflow-y:hidden;
}
p.ornek3{
overflow-y:scroll;
}
p.ornek4{
overflow-y:auto;
}
p{
width: 120px;
height: 40px;
border: 1px solid red;
}
</style>
</head>
<body>
<p class="ornek1">ABCDEF GHIJKLMNO PQRSTUVW XYZ</p><br>
<p class="ornek2">ABCDEF GHIJKLMNO PQRSTUVW XYZ</p><br>
<p class="ornek3">ABCDEF GHIJKLMNO PQRSTUVW XYZ</p><br>
<p class="ornek4">ABCDEF GHIJKLMNO PQRSTUVW XYZ</p><br>
</body>
</html>
overflow
Bu özelliğin kullanımı da üstteki iki özelliğin kullanımı ile aynı şekilde olur. Girilebilecek değerler ve bu değerlerin etkileri aynıdır. Fakat bu özellik her iki yöndeki taşma için de uygulanacak yöntemi belirler.
<!DOCTYPE html>
<html>
<head>
<title>CSS Taşmalar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
overflow:visible;
}
p.ornek2{
overflow:hidden;
}
p.ornek3{
overflow:scroll;
}
p.ornek4{
overflow:auto;
}
p{
width: 100px;
height: 40px;
border: 1px solid red;
}
</style>
</head>
<body>
<p class="ornek1">ABCDEF GHIJKLMNO PQRSTUVW XYZ</p><br>
<p class="ornek2">ABCDEF GHIJKLMNO PQRSTUVW XYZ</p><br>
<p class="ornek3">ABCDEF GHIJKLMNO PQRSTUVW XYZ</p><br>
<p class="ornek4">ABCDEF GHIJKLMNO PQRSTUVW XYZ</p><br>
</body>
</html>