Pengertian dan Nilai Css Oveflow Html

Apa yang maksud dengan overflow?. Proferti overflow berfungsi untuk mengendalikan apa yang terjadi di dalam konten yang berada di luar batas yang telah di atur. Misalkan dalam sebuah gambar yang berisi dengan 300px dan di atur secara eksplisit, namunn gambar tersebut berukuran lebar 500px. Gambar tersebut akan keluar dari div dan akan terlihat secara default, namun jika  anda mengatur dalam overflow ke hidden, maka gambar akan dimuat secara terputus pada 300px.

Sebelum kita membahas tentang overflow secara luas, anda harus mengetahui pembagian dari overflow yang akan di muat dalam konten.

Jenis Nilai overflow terbagi atas 6 dalam pembuatan konten:

1. Tersembunyi (hidden) adalah konten-konten yang berlimpah akan di sembunyikan.
2. Gulir (scroll) yaitu hampir sama dengan di sembunyikan namun pengguna dapat mengeser atau scrool yang telah tersembunyi.
3. Otomatis adalah dalam konten berjalan di luar kotaknya maka konten tersebut akan di sembunyikan sementara dalam scroll bar harus terlihat oleh penguna untuk membaca konten secara keseluruhan.
4. Terlihat adalah konten tidak terpotong saat keluar dari kotaknya atau sering di sebut dengan default dari pengaturan properti.
5. Awal yaitu menggunakan nilai default yang telah terlihat.
6. Mewarisi yaitu set overflow ke nilai eleman dalam induknya.
7. Ingat bahwa teks secara alami akan membungkus pada akhir elemen (kecuali white-space berubah) sehingga teks jarang menjadi penyebab overflow. Kecuali ketinggian ditetapkan, teks hanya akan mendorong elemen yang lebih tinggi juga. Overflow mulai dimainkan lebih sering saat lebar dan ketinggian eksplisit ditetapkan dan tidak diinginkan konten untuk tumpah keluar, atau saat penggulir secara eksplisit di hindari.

Gulir (Scroll)

Dalam mengatur nilai overflow dari sebuah kotak untuk menggulir akan menyembunyikan konten dari posisi render diluar kotak, jika anda memberikan scrollbar agar bisa di gulir pada bagiankotak untuk melihat isi konten.

Nilai overflow gulir ini biasanya pengguna membuat tanpa peduli dan mendaptakan Both scrollbar secara horizontal maupun vertikal bahkan Cuma satu.

Otomatis

Nilai overflow otomatis hampir sama dengan nilai gulir, namun nilai ini hanya memecahkan masalah yang terdapat scrollbar di saat anda membuatnya. Biasanya scrollbar akan muncul jika ada konten yang melanggar element konten yang telah dibuat.

Terlihat

Yang terpenting dan perlu diingat bahwa meskin dalam konten telihat di luar kotak, maka konten tidak akan mempengaruhi halaman konten. Misalkan jika anda tidak mengatur properti overflow sama sekali maka tidak ada lasan untuk eksplisit untuk menetapkan properti agar terlihat, kecuali anda mengesampingkan agar tidak terpasang di tempat lainnya.

Tersembunyi

Kebalikan dari default yang terlihat tersembunyi. Ini benar-benar menyembunyikan konten yang melampaui kotak.

Ini sangat berguna digunakan dengan konten dinamis dan kemungkinan overflow menyebabkan masalah tata letak yang serius. Namun, ingatlah bahwa konten yang tersembunyi dengan cara ini benar-benar tidak dapat diakses (kurang melihat sumbernya). Jadi misalnya pengguna memiliki ukuran font default yang ditetapkan lebih besar dari yang Anda harapkan, Anda mungkin akan mendorong teks di luar kotak dan menyembunyikannya sepenuhnya dari pandangan mereka.