The overflowkawalan harta apa yang berlaku kepada kandungan yang rehat di luar batas: bayangkan divdi mana anda telah jelas bakal menjadi 200px lebar, tetapi mengandungi imej yang 300px lebar. Gambar itu akan keluar dari div dan secara visiblelalai. Manakala jika anda menetapkan overflownilainya hidden, gambar akan dipotong pada 200px.
div ( overflow: visible | hidden | scroll | auto | inherit )Nilai
visible: kandungan tidak dipotong ketika keluar di luar kotaknya. Ini adalah nilai lalai harta tanahhidden: kandungan limpahan akan disembunyikan.scroll: mirip dengan tersembunyi kecuali pengguna akan dapat menatal kandungan tersembunyiauto: jika kandungan dilanjutkan di luar kotaknya maka kandungan itu akan disembunyikan sementara bar tatal harus kelihatan bagi pengguna untuk membaca isi kandungannya.initial: menggunakan nilai lalai yangvisibleinherit: menetapkan limpahan ke nilai elemen induknya.
Ingat bahawa teks secara semula jadi akan dibungkus pada akhir elemen (kecuali ruang putih diubah) jadi teks jarang menjadi penyebab limpahan. Kecuali ketinggian ditetapkan, teks juga akan mendorong elemen lebih tinggi. Overflow menjadi lebih biasa apabila lebar dan ketinggian eksplisit ditetapkan dan tidak diinginkan untuk menumpahkan sebarang kandungan, atau ketika menatal secara eksplisit dapat dielakkan.
Kelihatan
Sekiranya anda tidak menetapkan sifat limpahan sama sekali, lalai akan kelihatan. Oleh itu, secara umum, tidak ada alasan untuk menetapkan harta benda ini secara eksplisit kecuali anda mengesampingkannya agar tidak ditetapkan di tempat lain.
Perkara penting yang perlu diingat di sini adalah bahawa walaupun kandungannya dapat dilihat di luar kotak, kandungan itu tidak mempengaruhi aliran halaman. Sebagai contoh:
Secara amnya, anda seharusnya tidak menetapkan ketinggian statis pada kotak dengan teks web di dalamnya, jadi tidak seharusnya muncul.
Tersembunyi
Sebaliknya dari lalai yang kelihatan tersembunyi . Ini secara harfiah menyembunyikan kandungan yang melampaui kotak.
Ini sangat berguna digunakan dengan kandungan dinamik dan kemungkinan limpahan menyebabkan masalah susun atur yang serius. Namun, ingat bahawa kandungan yang disembunyikan dengan cara ini sama sekali tidak dapat diakses (tidak dapat melihat sumbernya). Jadi sebagai contoh pengguna mempunyai ukuran fon lalai mereka yang lebih besar daripada yang anda harapkan, anda mungkin menolak teks di luar kotak dan menyembunyikannya sepenuhnya dari pandangan mereka.
Tatal
Menetapkan nilai limpahan kotak untuk menatal akan menyembunyikan kandungan dari rendering di luar kotak, tetapi akan menawarkan bar tatal untuk menatal bahagian dalam kotak untuk melihat kandungannya.
Yang perlu diperhatikan dengan nilai ini ialah anda mendapat KEDUA bar tatal mendatar dan menegak tidak kira apa, walaupun kandungannya hanya memerlukan satu atau yang lain.
Penggulungan momentum iOS boleh diaktifkan untuk nilai ini dengan -webkit-overflow-scrolling.
Catatan: Di OS X Lion, ketika bar tatal ditetapkan hanya untuk ditunjukkan ketika digunakan, scrollberperilaku lebih mirip auto, kerana bar tatal yang diperlukan hanya akan muncul.
Auto
Overflow automatik sangat mirip dengan nilai tatal, hanya menyelesaikan masalah mendapatkan bar tatal apabila anda tidak memerlukannya. Bar tatal hanya akan muncul jika terdapat kandungan yang benar-benar keluar dari elemen.
limpahan-x dan limpahan-y
Anda juga boleh memanipulasi limpahan kandungan secara mendatar atau menegak dengan sifat overflow-xdan overflow-ysifat. Contohnya dalam demo di bawah limpahan mendatar dapat ditatal sementara teks yang melampaui ketinggian kotak disembunyikan:
.box ( overflow-y: hidden; overflow-x: scroll; )Pembersihan Float
Salah satu kegunaan yang lebih popular untuk menetapkan overflow, cukup peliknya, adalah float clearing Menetapkan limpahan tidak membersihkan pelampung pada elemen, ia akan membersihkan diri. Ini bermaksud bahawa elemen dengan limpahan (nilai apa pun kecuali visible) akan meluas seluas yang diperlukan untuk merangkumi elemen anak di dalam yang terapung (bukannya runtuh), dengan asumsi ketinggian tidak dinyatakan. Seperti ini:
Teknik pelepasan apungan yang lebih baik adalah penyelesaian yang jelas, kerana tidak memerlukan anda mengubah harta limpahan dengan cara yang tidak anda perlukan.
Menghasilkan konteks pemformatan blok
Sangat menarik untuk diperhatikan bahawa overflowjuga akan membuat konteks pemformatan blok baru yang berguna jika kita ingin menyelaraskan elemen blok di sebelah elemen terapung. Dalam contoh di bawah ini kami menunjukkan bagaimana sebilangan perenggan akan berinteraksi dengan gambar terapung secara lalai dan kemudian kami gunakan overflow: hiddenuntuk menyelaraskan teks dalam kotaknya sendiri:
Ini datang dari catatan hebat oleh Nicole Sullivan yang terus memberi inspirasi kepada objek media.
Bolehkah bar tatal digayakan dengan CSS?
Anda dulu boleh menggayakan bar tatal di IE (v5.5?) Tetapi tidak lebih. Anda boleh menggayakannya lagi dalam penyemak imbas WebKit. Sekiranya anda memerlukan bar tatal tersuai penyemak imbas, lihat JavaScript.
Sekiranya elemen perlu mempunyai bar tatal yang ditambahkan untuk menghormati nilai limpahan, Firefox meletakkannya di luar elemen, menjaga lebar / tinggi yang terlihat seperti yang dinyatakan. IE meletakkan bar tatal ke dalam, menjaga lebar / tinggi keseluruhan seperti yang dinyatakan.
Demo
Demo untuk artikel ini diambil dari halaman contoh ini.
Sokongan Penyemak Imbas
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Berkaitan
- Harta apungan
Maklumat lanjut
- Memahami Humble Clearfix
- Limpahan: faedah rahsia
- Limpahan pada MDN
- Limpahan pada W3C
- Mencari / memperbaiki limpahan badan yang tidak disengajakan