Pelajari cara mengontrol konten yang meluap dari elemen menggunakan properti CSS overflow.

CSS Overflow

Properti overflow digunakan untuk menentukan bagaimana konten yang lebih besar dari ukuran elemen akan ditangani.

Nilai dari `overflow`

visible (default): Konten yang meluap akan tetap terlihat di luar elemen.
hidden: Konten yang meluap akan dipotong dan tidak terlihat.
scroll: Menambahkan scroll bar meskipun tidak dibutuhkan.
auto: Menambahkan scroll bar hanya jika diperlukan.

Contoh: overflow: visible

<style>
  .box-visible {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: visible;
  }
</style>
 
<div class="box-visible">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

Contoh: overflow: hidden

<style>
  .box-hidden {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
  }
</style>
 
<div class="box-hidden">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

Contoh: overflow: scroll

<style>
  .box-scroll {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: scroll;
  }
</style>
 
<div class="box-scroll">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

Contoh: overflow: auto

<style>
  .box-auto {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: auto;
  }
</style>
 
<div class="box-auto">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

Dengan overflow, kamu bisa mengendalikan tampilan konten panjang agar lebih rapi dan sesuai desain.

CSS Overflow

CSS Overflow

Nilai dari overflow

Contoh: overflow: visible

Contoh: overflow: hidden

Contoh: overflow: scroll

Contoh: overflow: auto

On this page

Nilai dari `overflow`