Overflow: Mengendalikan Konten yang Meluber

Ketika konten tidak muat

Secara default (overflow: visible), konten yang kebesaran akan meluber keluar wadahnya dan menimpa elemen lain. Kadang itu yang dimau (dropdown, tooltip), seringnya tidak.

Empat nilai overflow

.kotak {
  width: 200px;
  height: 100px;
}

.visible { overflow: visible; } /* default: meluber keluar */
.hidden { overflow: hidden; }   /* dipotong, tidak bisa diakses */
.scroll { overflow: scroll; }   /* selalu ada scrollbar */
.auto { overflow: auto; }       /* scrollbar hanya kalau perlu */

auto adalah pilihan paling aman: scrollbar muncul hanya saat konten memang meluber.

Kontrol per sumbu

.konten {
  overflow-x: auto;  /* scroll horizontal kalau perlu */
  overflow-y: hidden; /* vertikal dipotong */
}

Pola umum: daftar chip/tag yang bisa di-scroll horizontal di HP.

.daftar-chip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin; /* Firefox: scrollbar ramping */
}

Jebakan: overflow memotong sticky dan absolute

overflow: hidden (atau auto/scroll) pada leluhur akan memotong elemen absolute yang keluar dari batasnya, dan merusak position: sticky di dalamnya. Gejala klasik: dropdown terpotong atau navbar sticky tidak nempel.

Solusinya: pindahkan elemen yang butuh keluar (dropdown, modal) ke level DOM yang tidak punya overflow, atau pakai overflow: clip yang tidak membentuk scroll container (lebih aman buat sticky di browser modern).

Ellipsis multibaris

Satu baris sudah dibahas di modul tipografi. Untuk beberapa baris:

.deskripsi {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* maksimal 3 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Teks dipotong setelah 3 baris dengan "..." otomatis. Properti berawalan -webkit- ini sudah didukung semua browser modern walau namanya legacy.

Catatan teknis: text-overflow: ellipsis butuh overflow: hidden + white-space: nowrap (satu baris) atau line-clamp (multibaris). Tanpa overflow hidden, teksnya meluber dan ellipsis tidak muncul. Tiga properti ini satu paket yang tidak bisa dipisah.

Rangkuman

visible meluber, hidden memotong, scroll selalu ada scrollbar, auto hanya saat perlu. Waspadai overflow yang memotong dropdown dan merusak sticky. Pakai line-clamp buat ellipsis multibaris yang rapi.