Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 11 : Cara Menggunakan Properti Outlines di CSS. Selanjutnya, kita akan mempelajari cara menggunakan properti overflow di CSS.
Mungkin ada beberapa kendala ketika konten elemen mungkin lebih besar dari jumlah ruang yang dialokasikan untuk konten tersebut.
Misalnya, nilai properti width dan height yang diberikan tidak cukup ruang untuk menampung konten sebuah elemen.
CSS menyediakan properti yang disebut overflow yang memberi tahu browser apa yang harus dilakukan jika konten lebih besar dari kotak konten itu sendiri.
Properti ini dapat diisi dengan nilai berikut :
| No | Nilai & Deskripsi |
| 1 | visible Memungkinkan konten keluar dari batas elemen yang memuatnya. |
| 2 | hidden Isi dari elemen bersarang hanya dipotong di perbatasan elemen yang dimuat dan tidak ada bilah gulir yang terlihat. |
| 3 | scroll Ukuran elemen penampung tidak berubah, tetapi scrollbar ditambahkan untuk memungkinkan pengguna menggulir untuk melihat konten. |
| 4 | auto Tujuannya sama dengan scroll, tetapi scrollbar hanya akan ditampilkan jika konten memiliki jumlah yang banyak. |
Berikut ini contohnya :
<html>
<head>
<style type = "text/css">
.scroll {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
</head>
<body>
<p>Contoh nilai scroll:</p>
<div class = "scroll">
Saya akan menuliskan banyak konten di sini untuk menunjukkan kepada Anda
Scrollbar akan bekerja jika konten melebihi batas kotak elemen.
Ini akan menyediakan horizontal dan vertical scrollbar.
</div>
<br />
<p>Contoh nilai auto:</p>
<div class = "auto">
Saya akan menuliskan banyak konten di sini untuk menunjukkan kepada Anda
Scrollbar akan bekerja jika konten melebihi batas kotak elemen.
Ini akan menyediakan vertical scrollbar.
</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini bisa membantu Anda mempelajari cara menggunakan properti overflow di CSS untuk membuat dokuemn HTML lebih bagus.
