Overflow: Skrol, Klip dan Auto
Kawal perkara yang berlaku apabila kandungan melebihi bekasnya menggunakan sifat overflow.
Overflow: Skrol, Klip dan Auto ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah Limpahan?
Limpahan berlaku apabila kandungan unsur lebih besar daripada dimensinya yang ditetapkan. Sifat overflow mengawal perkara yang berlaku kepada kandungan berlebihan ini.
overflow: visible (Lalai)
Secara lalai, kandungan melimpah dan kelihatan di luar kotak unsur. Hal ini boleh menyebabkan kandungan bertindih dengan unsur adik-beradik atau terkeluar daripada ruang pandang.
<div class="box">This text is long enough to spill outside the box edges visibly.</div>
overflow: hidden
overflow: hidden memotong mana-mana kandungan yang melepasi sempadan unsur. Kandungan yang dipotong tidak boleh dicapai atau ditatal.
<div class="cropped">This long text gets clipped by the rounded box edges instead of spilling out.</div>
overflow: scroll
overflow: scroll sentiasa memaparkan bar skrol — walaupun kandungan muat sepenuhnya. Gunakan ini apabila anda mahukan antara muka yang konsisten tanpa mengira saiz kandungan.
<pre class="code-block">line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10</pre>
overflow: auto
overflow: auto hanya memaparkan bar skrol apabila kandungan benar-benar melimpah. Biasanya kaedah ini lebih disukai berbanding scroll untuk mengelakkan ruang bar skrol yang tidak diperlukan.
<div class="sidebar"><p>Paragraph one.</p><p>Paragraph two.</p><p>Paragraph three.</p><p>Paragraph four.</p><p>Paragraph five.</p><p>Paragraph six.</p></div>
overflow: clip
overflow: clip serupa dengan hidden tetapi lebih ketat: ia tidak mencipta konteks pemformatan blok dan tidak boleh ditatal menggunakan JavaScript. Sesuai untuk pemotongan yang selamat dari segi prestasi.
<div class="clipped">This long text will be clipped at the box edge with no scrollbar, unlike overflow hidden which still allows programmatic scrolling.</div>
overflow-x dan overflow-y
Kawal setiap paksi secara berasingan. Corak lazim membenarkan penatalan mendatar untuk kandungan lebar seperti kod atau jadual:
<div class="table-container"><table><tr><td>Col A</td><td>Col B</td><td>Col C</td><td>Col D</td><td>Col E</td><td>Col F</td></tr></table></div>
Corak Bekas Boleh Tatal
Untuk mencipta bekas boleh tatal, anda memerlukan ketinggian tetap serta overflow: auto atau scroll:
<div class="chat-messages"><p>Hey!</p><p>How's it going?</p><p>Working on the CSS course.</p><p>Nice, how far are you?</p><p>Almost done with overflow.</p><p>Let's grab lunch after.</p></div>
Konteks Pemformatan Blok daripada overflow
Menetapkan overflow kepada sebarang nilai selain visible akan mencipta konteks pemformatan blok (BFC). Konteks ini mengandungi float dalaman dan menghalang keruntuhan margin daripada terkeluar dari bekas.
Rantaian Tatalan
Apabila bekas boleh tatal ditatal hingga ke hadnya, peristiwa tatal boleh "dirantaikan" kepada induk. Gunakan overscroll-behavior: contain untuk menghalangnya.
<div class="modal-body"><p>Modal content line 1</p><p>Modal content line 2</p><p>Modal content line 3</p><p>Modal content line 4</p><p>Modal content line 5</p><p>Modal content line 6</p></div>
text-overflow berbanding overflow
text-overflow: ellipsis berkaitan dengan teks di dalam elemen dan memerlukan overflow: hidden + white-space: nowrap untuk berfungsi. overflow mengawal tingkah laku limpahan elemen itu sendiri.
Semakan Pantas
Nilai overflow manakah yang hanya memaparkan bar tatal apabila kandungan benar-benar melimpah?
Imbas Kembali
overflow: hidden memotong kandungan. overflow: auto menambah bar tatal hanya apabila diperlukan (disyorkan). overflow: scroll sentiasa memaparkan bar tatal. overflow: clip memotong kandungan tanpa mencipta konteks pemformatan baharu. Gunakan overflow-x/y untuk mengawal setiap paksi.
Pelajari CSS dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Overflow: Skrol, Klip dan Auto” percuma?
Ya — teks penuh “Overflow: Skrol, Klip dan Auto” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Overflow: Skrol, Klip dan Auto”?
Kawal perkara yang berlaku apabila kandungan melebihi bekasnya menggunakan sifat overflow. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Overflow: Skrol, Klip dan Auto” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Block berbanding Inline berbanding Inline-Block
- Visibility berbanding Display None
- Overflow: Skrol, Klip dan Auto
- Tetapan Semula dan Penormalan CSS