Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 50 : Cara Menggunakan Property Margin di CSS. Pada tutorial ini kita akan belajar tentang cara menggunakan property overflow di CSS.
Properti CSS overflow menentukan cara menangani konten ketika konten tersebut keluar (meluap) dari kontainer tingkat bloknya.
Kita tahu bahwa setiap elemen pada halaman adalah kotak persegi panjang dan ukuran, posisi, dan perilaku kotak-kotak ini dikontrol melalui CSS.
Mari kita ambil contoh: Jika Anda tidak mengatur tinggi kotak, kotak akan bertambah besar sesuai dengan isinya.
Tetapi jika Anda mengatur tinggi atau lebar kotak tertentu dan isi di dalamnya tidak muat, apa yang akan terjadi.
Properti CSS overflow digunakan untuk mengatasi masalah ini. Ini menentukan apakah akan membuat klip konten, merender bilah gulir, atau hanya menampilkan konten.
Nilai Property CSS Overflow
| Nilai | Deskripsi |
| visible | Ini menentukan bahwa overflow tidak terpotong. Ini ditampilkan di luar kotak elemen. Ini adalah nilai default. |
| hidden | Ini menentukan bahwa luapan terpotong, dan konten lainnya tidak akan terlihat. |
| scroll | Ini menentukan bahwa luapan terpotong, dan bilah gulir digunakan untuk melihat konten lainnya. |
| auto | Ini menentukan bahwa jika overflow terpotong, bilah gulir diperlukan untuk melihat konten lainnya. |
| inherit | Ini mewarisi properti dari elemen induknya. |
| initial | ni digunakan untuk mengatur properti ke nilai awalnya. |
Contoh CSS Overflow
Mari kita lihat properti overflow CSS sederhana.
<!DOCTYPE html>
<html>
<head>
<style>
div.scroll {
background-color: #00ffff;
width: 100px;
height: 100px;
overflow: scroll;
}
div.hidden {
background-color: #00FF00;
width: 100px;
height: 170px;
overflow: hidden;
}
</style>
</head>
<body>
<p> Properti overflow menentukan apa yang harus dilakukan jika konten suatu elemen melebihi ukuran kotak elemen.</p>
<p>overflow:scroll</p>
<div class="scroll"> Anda dapat menggunakan properti overflow bila Anda ingin memiliki kontrol tata letak yang lebih baik.
Nilai defaultnya adalah visible.</div>
<p>overflow:hidden</p>
<div class="hidden"> Anda dapat menggunakan properti overflow bila Anda ingin memiliki kontrol tata letak yang lebih baik.
Nilai defaultnya adalah visible.</div>
</body>
</html> Semoga tutorial property overflow ini membantu Anda untuk memahami cara menangani konten ketika konten tersebut keluar (meluap) dari kontainer tingkat bloknya di website Anda.
