CSS Overflow: Apa itu dan Bagaimana Menggunakannya

CSS Overflow adalah properti yang mengontrol apa yang terjadi pada konten yang terlalu besar untuk muat di dalam area yang ditentukan. Properti ini berguna untuk memiliki kontrol lebih baik terhadap tata letak halaman web. Properti ini memiliki empat nilai utama: visible, hidden, scroll, dan auto.

Visible

Nilai visible adalah nilai default dari properti overflow. Ini berarti bahwa konten yang melebihi area tidak dipotong dan ditampilkan di luar kotak elemen. Contoh:

Hidden

Nilai hidden berarti bahwa konten yang melebihi area dipotong dan sisanya tidak terlihat. Tidak ada scrollbar yang ditambahkan dan pengguna tidak dapat melihat konten yang terpotong dengan cara apapun. Contoh:

Scroll

Nilai scroll berarti bahwa konten yang melebihi area dipotong dan scrollbar ditambahkan untuk menggulir di dalam kotak. Scrollbar akan muncul baik secara horizontal maupun vertikal, bahkan jika tidak diperlukan. Contoh:

Auto

Nilai auto mirip dengan scroll, tetapi scrollbar hanya ditambahkan jika diperlukan. Jika konten muat di dalam area, maka tampilannya sama dengan visible. Contoh:

Kesimpulan

Properti CSS Overflow memungkinkan kita untuk menentukan perilaku yang diinginkan saat konten tidak muat di dalam area yang ditentukan. Nilai visible menampilkan konten di luar kotak elemen, nilai hidden memotong konten dan menyembunyikannya, nilai scroll memotong konten dan menambahkan scrollbar, dan nilai auto memotong konten dan menambahkan scrollbar hanya jika diperlukan.