Overflow

Pengenalan Overflow

Properti overflow digunakan untuk mengendalikan perilaku konten yang melebihi ukuran kontainernya.

Nilai Overflow

Ada beberapa nilai yang dapat digunakan untuk properti overflow:

  • visible: Nilai default. Konten yang melebihi batas kontainer akan terlihat di luar kontainer.
  • hidden: Konten yang melebihi batas kontainer akan disembunyikan.
  • scroll: Tambahkan bilah geser horizontal dan vertikal jika konten melebihi batas kontainer.
  • auto: Mirip dengan scroll, tetapi bilah geser hanya muncul jika konten melebihi kontainer.

Contoh Penggunaan

.kontainer {
   width: 300px; /* Lebar kontainer */
   height: 200px; /* Tinggi kontainer */
   overflow: scroll; /* Tambahkan bilah geser jika diperlukan */
}

Dalam contoh di atas, jika konten di dalam .kontainer melebihi ukuran yang ditentukan, maka akan muncul bilah geser untuk mengakses konten yang tidak terlihat.

Contoh Praktis

Misalnya, Anda memiliki sebuah div dengan teks panjang di dalamnya:

<div class="kontainer">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
</div>

Dan kemudian Anda menerapkan CSS dengan overflow: scroll;, maka jika teksnya melebihi ukuran .kontainer, bilah geser akan muncul sehingga Anda dapat melihat seluruh teksnya.

Sekarang, Anda telah memahami dasar-dasar penggunaan properti overflow dalam CSS. Anda dapat mengganti nilai overflow sesuai dengan kebutuhan desain Anda.

PREVIOUS
NEXT