Hai teman-teman, jumpa kembali bersama kami dalam course HTML & CSS Nusantech Academy. Setelah Kita sempat membahas tentang Float CSS. Kini kita akan lanjut membahas tentang dasar CSS lain, yakni Overflow.
Apa itu Overflow?
Seperti yang telah disampaikan pada materi Display & Position sebelumnya. Dimana kita sempat mengenal bagaimana halaman HTML kita dirender. Nah, sering kali kita mengalami masalah dengan flow ini. Kondisi dimana isi konten seperti text yang overflowing (meluap) dari elemen container-nya.
Contoh:
Kode HTML
<div class="red-box">
<p>
PT. Solusi Teknologi Nusantara (Nusantech) is a company that focuses on information technology services and research. We offer our solutions to help your organization, and we are also provide customized solution based on your needs. We are glad to work with many clients who grow together with us.
</p>
</div>Kode CSS:
.red-box {
width: 360px;
height: 200px;
border: 5px dotted red;
}Hasil:
Tentunya sangat terlihat berantakan bukan? Untuk mengatasi hal ini kita dapatmenggunakan Property Overflow dengan nilai berikut
- visible
Nilai default dari property ini, seperti pada gambar di atas dimana konten yang melebihi batas container akan dibiarkan tampil keluar dari container-nya
- hidden
Pada nilai hidden konten kita yang berlebih akan masuk kedalam container, tetapi sisa konten yang seharusnya keluar itu disembunyikan oleh container-nya dan juga tidak bisa discroll.
- scroll
Sama seperti overflow: hidden, hanya saja kita bisa melakukan scroll terhadap container untuk melihat seluruh isi konten
- auto
Nilai auto hampir mirip dengan overflow: scroll dimana kita dapat men-scroll konten berlebih dalam container. Perbedaan yang paling menonjol dari kedua nilai ini adalah ketika kita menggunakan overflow: scroll, kita akan mendapati dua scrollbar yang akan selalu ditampilkan sekalipun konten kita tidak meluap. Sedangkan overflow: auto hanya akan menampilkan scrollbar baik vertical atau horizontal hanya jika dibutuhkan saja
Penutup
Yups sekian dulu untuk perkenalan kita pada overflow kali ini. Jika teman-teman punya saran atau pertanyaan silahkan bisa sampaikan pada kolom komentar di bawah. Pada pembahasan selanjutnya Kita akan mengenal tentang CSS Flexbox. Tetap Semangat!
See you next time!
