Overflow dan teks terpotong

Kelola isi yang tak muat: gulir, sembunyikan, atau elipsis.

Pahami konsepnya

Apa yang terjadi saat isi lebih besar dari kotaknya? Properti overflow menjawab dengan empat pilihan. visible (bawaan) membiarkan isi meluber keluar kotak — kadang artistik, sering kacau. hidden memotong rapat apa pun yang melebihi batas. scroll selalu menyediakan bilah gulir; auto lebih sopan — bilah baru muncul saat benar-benar diperlukan. Aturan vertikal-horizontal bisa berbeda: overflow-x: hidden; overflow-y: auto memotong menyamping tapi menggulir ke bawah.

Resep paling dipakai sepanjang karier: teks satu baris yang terpotong elipsis. Tiga sahabat wajib bersama: white-space: nowrap mencegah turun baris, overflow: hidden memotong, dan text-overflow: ellipsis menambah "…" di titik potong. Tanpa ketiganya lengkap, elipsis tidak muncul.

Blok kode dan kutipan panjang adalah penghuni tetap overflow: pre berpasangan dengan overflow-x: auto agar kode panjang digulir alih-alih merusak tata letak. Kotak dengan tinggi tetap (max-height) plus overflow-y: auto juga adalah resep bawaan dropdown dan panel chat yang isinya bertumbuh.

Coba contoh kode

.judul-satu-baris {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

pre.kode {
  overflow-x: auto;         /* kode panjang digulir */
}

.panel-chat {
  max-height: 320px;
  overflow-y: auto;         /* isi bertambah, kotak menggulir */
}

Trio pertama menghasilkan "Judul yang sangat panjang…" yang rapi di satu baris — hapus satu saja dan elipsisnya lenyap. pre menggulir menyamping menjaga halaman tetap utuh, dan panel chat dengan max-height membentuk jendela bergulir alami. Kombinasi kecil ini muncul di hampir semua antarmuka nyata.

Latihan singkat

Buat daftar judul artikel dengan elipsis satu baris, panel chat bergulir max-height 300px, dan blok kode yang menggulir menyamping.