The overflowkontrol properti apa yang terjadi ke konten yang istirahat di luar batas-batas nya: membayangkan divdi mana Anda telah secara eksplisit diatur menjadi 200px lebar, tapi berisi gambar yang lebar 300px. Gambar itu akan menonjol dari div dan secara visibledefault. Sedangkan jika overflownilainya diatur menjadi hidden, gambar akan terpotong pada 200px.
div ( overflow: visible | hidden | scroll | auto | inherit )Nilai
visible: konten tidak akan dipotong saat diproses di luar kotaknya. Ini adalah nilai default propertihidden: konten yang meluap akan disembunyikan.scroll: mirip dengan tersembunyi kecuali pengguna akan dapat menggulir melalui konten tersembunyiauto: jika konten keluar dari kotaknya maka konten itu akan disembunyikan sementara bilah gulir harus terlihat bagi pengguna untuk membaca konten lainnya.initial: menggunakan nilai default yaituvisibleinherit: menyetel luapan ke nilai elemen induknya.
Ingat bahwa teks secara alami akan membungkus di akhir elemen (kecuali spasi diubah) sehingga teks jarang menjadi penyebab overflow. Kecuali jika ketinggian disetel, teks hanya akan mendorong elemen lebih tinggi juga. Overflow berperan lebih umum saat lebar dan tinggi eksplisit disetel dan konten apa pun tidak boleh tumpah, atau saat pengguliran secara eksplisit dihindari.
Terlihat
Jika Anda tidak menyetel properti overflow sama sekali, defaultnya akan terlihat. Jadi secara umum, tidak ada alasan untuk secara eksplisit menyetel properti ini menjadi terlihat kecuali Anda menimpanya agar tidak disetel di tempat lain.
Hal penting yang perlu diingat di sini adalah bahwa meskipun konten terlihat di luar kotak, konten tersebut tidak memengaruhi aliran halaman. Sebagai contoh:
Umumnya, Anda tidak boleh menyetel ketinggian statis pada kotak dengan teks web di dalamnya, jadi seharusnya tidak muncul.
Tersembunyi
Kebalikan dari default terlihat tersembunyi . Ini benar-benar menyembunyikan konten apa pun yang melampaui kotak.
Ini sangat berguna dalam penggunaan dengan konten dinamis dan kemungkinan luapan menyebabkan masalah tata letak yang serius. Namun, perlu diingat bahwa konten yang disembunyikan dengan cara ini sama sekali tidak dapat diakses (selain melihat sumbernya). Jadi misalnya pengguna menetapkan ukuran font default lebih besar dari yang Anda harapkan, Anda mungkin mendorong teks di luar kotak dan menyembunyikannya sepenuhnya dari pandangan mereka.
Gulir
Menyetel nilai luapan kotak untuk digulir akan menyembunyikan konten dari rendering di luar kotak, tetapi akan menawarkan bilah gulir untuk menggulir bagian dalam kotak untuk melihat konten.
Yang perlu diperhatikan dengan nilai ini adalah Anda mendapatkan KEDUA scrollbar horizontal dan vertikal apa pun yang terjadi, meskipun konten hanya memerlukan satu atau yang lain.
Pengguliran momentum iOS dapat diaktifkan untuk nilai ini dengan -webkit-overflow-scrolling.
Catatan: Di OS X Lion, saat scrollbar diatur untuk hanya ditampilkan saat digunakan, scrollberperilaku lebih mirip auto, hanya scrollbar yang diperlukan yang akan muncul.
Mobil
Auto overflow sangat mirip dengan nilai scroll, hanya saja ini menyelesaikan masalah mendapatkan scrollbar saat Anda tidak membutuhkannya. Scrollbar hanya akan muncul jika ada konten yang benar-benar keluar dari elemen tersebut.
overflow-x dan overflow-y
Ini juga memungkinkan untuk memanipulasi luapan konten secara horizontal atau vertikal dengan properti overflow-xdan overflow-y. Misalnya dalam demo di bawah luapan horizontal dapat digulir sementara teks yang melampaui ketinggian kotak disembunyikan:
.box ( overflow-y: hidden; overflow-x: scroll; )Kliring Mengambang
Salah satu penggunaan yang lebih populer dari pengaturan luapan, anehnya, adalah pembersihan apung. Menyetel luapan tidak menghapus pelampung di elemen, itu menghapus sendiri. Ini berarti elemen dengan overflow (kecuali nilai apa pun visible) akan diperluas sebesar yang dibutuhkan untuk mencakup elemen turunan di dalam yang mengambang (bukan menciutkan), dengan asumsi bahwa ketinggian tidak dideklarasikan. Seperti ini:
Teknik pembersihan float yang lebih baik adalah clearfix, karena tidak mengharuskan Anda mengubah properti overflow dengan cara yang tidak Anda perlukan.
Menghasilkan konteks pemformatan blok
Menarik untuk dicatat bahwa overflowini juga akan membuat konteks pemformatan blok baru yang berguna jika kita ingin menyelaraskan elemen blok di sebelah float. Dalam contoh di bawah ini kami menunjukkan bagaimana sejumlah paragraf akan berinteraksi dengan gambar mengambang secara default dan kemudian kami gunakan overflow: hiddenuntuk menyelaraskan teks di dalam kotaknya sendiri:
Ini berasal dari posting bagus oleh Nicole Sullivan yang kemudian menginspirasi objek media.
Bisakah scrollbar diberi gaya dengan CSS?
Anda dulu dapat mengatur gaya scrollbar di IE (v5.5?) Tetapi tidak lebih. Anda dapat menatanya sekarang lagi di browser WebKit. Jika Anda memerlukan scrollbar kustom lintas browser, lihat JavaScript.
Jika sebuah elemen perlu ditambahkan scrollbar untuk menerima nilai luapan, Firefox menempatkannya di luar elemen, menjaga lebar / tinggi yang terlihat seperti yang dinyatakan. IE menempatkan scrollbar di dalam, menjaga lebar / tinggi keseluruhan seperti yang dideklarasikan.
Demo
Demo untuk artikel ini diambil dari halaman contoh ini.
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Terkait
- Properti pelampung
Informasi lebih lanjut
- Memahami Humble Clearfix
- Overflow: manfaat rahasia
- Melimpah di MDN
- Melimpah di W3C
- Menemukan / memperbaiki luapan tubuh yang tidak diinginkan