White Space dan Text Overflow

white-space: siapa yang atur baris?

Secara default, browser menggabungkan spasi berlebih dan memutus baris otomatis (normal). Nilai lain mengubah perilaku ini:

.kode {
  white-space: pre;       /* seperti <pre>: spasi & baris baru dihormati */
}

.satu-baris {
  white-space: nowrap;    /* tidak boleh pindah baris */
}

.chat {
  white-space: pre-wrap;  /* hormati baris baru TAPI tetap wrap */
}

pre-wrap adalah favorit untuk konten user (komentar, chat): baris baru yang diketik user dipertahankan, tapi teks panjang tetap wrap.

Text overflow: ellipsis

Trio wajib untuk teks terpotong dengan "...":

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

Ketiganya harus ada: nowrap mencegah pindah baris, overflow: hidden memotong, ellipsis menampilkan "...". Tanpa salah satu, triknya gagal.

Untuk multi-baris, pakai teknik line-clamp:

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

Catatan teknis: -webkit-line-clamp aslinya properti vendor, tapi kini didukung semua browser modern dan sedang distandarisasi sebagai line-clamp. Aman dipakai saat ini.

Analogi: mesin tik vs Word

white-space: normal seperti Word: teks mengalir dan wrap otomatis. white-space: pre seperti mesin tik: apa yang kamu ketik persis itu yang tampil, termasuk spasi ganda dan baris baru. nowrap seperti papan pengumuman satu baris: semua dipaksa sebaris.

Kenapa ini penting?

HTML secara default "melipat" spasi ganda dan baris baru menjadi satu spasi. Kadang kamu BUTUH format asli: kode program, puisi, atau alamat. Di sisi lain, kadang kamu butuh teks tetap sebaris: judul kartu yang tidak boleh turun baris.

Contoh bertahap: tiga kebutuhan

Kebutuhan 1, tampilkan kode apa adanya:

pre {
  white-space: pre;
  overflow-x: auto; /* kode panjang bisa di-scroll */
  background: #0f172a;
  color: #e2e8f0;
  padding: 16px;
  border-radius: 8px;
}

Kebutuhan 2, judul satu baris dengan ellipsis:

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

Tiga properti wajib bersamaan: nowrap (jangan wrap), hidden (potong), ellipsis (tampilkan ...).

Kebutuhan 3, chat bubble yang menghormati enter pengguna tapi tetap wrap:

.pesan-chat {
  white-space: pre-wrap; /* baris baru dihormati + wrap otomatis */
}

pre-wrap adalah pilihan terbaik untuk konten buatan pengguna (komentar, chat): enter mereka tampil, tapi teks panjang tetap wrap.

Kesalahan umum pemula

Salah: nowrap tanpa overflow. Teks nowrap yang kepanjangan MELUBER keluar wadah dan merusak layout. Selalu pasangkan dengan overflow: hidden/auto.

Salah: pre untuk teks biasa. white-space: pre mematikan wrap otomatis: paragraf panjang meluber di HP. Pakai pre hanya untuk kode/teks yang memang butuh format asli.

Salah: lupa bahwa HTML melipat spasi. Mengetik spasi ganda di HTML tidak berpengaruh tanpa white-space yang tepat. Bukan bug, itu spesifikasi.

Latihan kilat

1. Judul kartu harus satu baris dengan "..." bila kepanjangan. Tulis tiga properti wajibnya.
2. Kamu membuat kolom komentar. Pengguna menekan Enter untuk baris baru, tapi teks panjang harus tetap wrap. Properti apa yang tepat?
3. Apa akibat memakai white-space: nowrap TANPA overflow? Dan memakai white-space: pre untuk paragraf biasa di HP?

Kunci: (1) white-space: nowrap; overflow: hidden; text-overflow: ellipsis;. (2) white-space: pre-wrap;. (3) Teks meluber merusak layout; paragraf pre tidak wrap dan meluber di layar kecil.

Istilah kunci

• normal: perilaku default (spasi dilipat, wrap otomatis).
• nowrap: paksa satu baris.
• pre: hormati format asli seperti diketik.
• pre-wrap: format asli + wrap otomatis (terbaik untuk konten pengguna).
• Collapse: pelipatan spasi ganda/baris baru oleh HTML.

Kasus nyata: aplikasi chat

.bubble {
  white-space: pre-wrap;   /* hormati Enter pengguna */
  word-break: break-word;  /* potong kata super panjang (URL) */
  max-width: 75%;
}

Kombinasi ini menangani semua input chat: baris baru tampil, URL panjang tidak meluber, bubble tidak memenuhi layar.

Rangkuman

white-space mengatur perilaku spasi dan wrap. Untuk ellipsis satu baris: nowrap + overflow hidden + text-overflow. Untuk beberapa baris: line-clamp.