Menurut konsep model kotak CSS, setiap elemen pada halaman berbentuk kotak persegi panjang. Ukuran, posisi, dan perilaku kotak-kotak ini semuanya dapat dikontrol menggunakan CSS. Yang saya maksud dengan perilaku adalah bagaimana ia menangani ketika konten di dalam dan di luar kotak berubah. Misalnya, jika Anda tidak mengatur tinggi kotak, tinggi kotak akan bertambah sesuai kebutuhan untuk menampung isinya. Namun apa yang terjadi jika Anda menentukan tinggi atau lebar kotak dan konten di dalamnya melebihi itu? Inilah saatnya menambahkan properti CSS overflow, yang memungkinkan Anda menentukan cara menangani situasi ini.
Properti overflow memiliki empat nilai: terlihat (default), tersembunyi, gulir, dan otomatis . Ada juga dua sifat saudara overflow, overflow-y dan overflow-x, yang jarang digunakan.
Mari kita lihat masing-masing nilai ini dan diskusikan penggunaan dan teknik umum.
Bisa dilihat
Jika Anda tidak mengatur atribut overflow, nilai atribut overflow default akan terlihat. Jadi secara umum, tidak ada alasan untuk secara khusus menyetel properti overflow menjadi terlihat kecuali Anda ingin mengganti nilai yang disetel ke tempat lain.
Hal penting yang perlu diingat di sini adalah meskipun konten di luar kotak terlihat, konten tersebut tidak mempengaruhi alur kerja halaman. Misalnya:
Secara umum, Anda setidaknya tidak perlu menyetel ketinggian tetap untuk kotak yang isinya berupa teks, sehingga Anda tidak akan menghadapi situasi ini.
Tersembunyi
Nilai kebalikan dari nilai default yang terlihat disembunyikan. Itu akan menyembunyikan segala sesuatu di luar kotak.
Ini sangat berguna untuk menangani konten dinamis yang mungkin menyebabkan beberapa masalah tata letak karena konten meluap. Namun, harap diingat bahwa konten yang disembunyikan menggunakan metode ini tidak akan terlihat sama sekali (kecuali Anda melihat kode sumbernya). Misalnya, beberapa pengguna menyetel font default browser mereka menjadi lebih besar dari yang Anda harapkan. Anda akan memasukkan beberapa teks ke luar kotak dan menyembunyikannya sepenuhnya...