White Space

Ketika kita mengetik spasi berlebih, tab, atau enter di dalam kode HTML, browser tidak menampilkannya apa adanya: semuanya diringkas menjadi satu spasi. Perilaku ini menyelamatkan paragraf biasa — kode sumber boleh diberi indentasi rapi tanpa mengganggu tampilan — tetapi menjadi hambatan saat kita menampilkan kode program, puisi, atau isi pesan yang barisnya dipisah sengaja oleh pengguna. Property white-space memberi kendali penuh atas perlakuan spasi tersebut, dan menjadi fondasi bagi resep memotong teks pada chapter berikutnya.

Bagaimana Browser Melipat Spasi #

HTML mengikuti aturan white space collapsing: rangkaian spasi dan tab diringkas menjadi satu spasi, dan pindah baris di kode sumber diperlakukan sebagai spasi biasa:

<p>Teks ini   ditulis dengan spasi berlebih
   dan pindah baris dua kali
   di dalam kode sumber.</p>

Aturan pelipatan ini menyelesaikan dua kebutuhan sekaligus: kode sumber boleh diberi indentasi dan pindah baris secukupnya agar nyaman dibaca penulisnya, tanpa mengubah tampilan sedikit pun bagi pembacanya. Bayangkan bila setiap enter di kode sumber ikut tampil — satu layout rapi di editor langsung berubah menjadi teks berongga di browser.

Mekanisme ini berlaku untuk teks biasa di HTML. Elemen <pre> membawa perilaku berbeda bawaannya, dan property white-space adalah cara kita menerapkan perilaku yang sama itu — maupun perilaku lain — pada elemen apa pun.

Enam Nilai white-space #

Cara cepat membaca namanya: suku pre berarti spasi dan pindah baris dipertahankan, suku wrap berarti teks tetap boleh pindah baris otomatis, dan suku line berarti hanya pindah baris yang dipertahankan. break-spaces mirip pre-wrap; bedanya, spasi yang dipertahankan ikut dihitung sebagai titik pindah baris — kasus khusus yang jarang dibutuhkan.

Kapan Memakai yang Mana #

.blok-kode {
  white-space: pre;
  font-family: monospace;
}

.konten-pengguna {
  white-space: pre-wrap;
}

.waktu-komentar {
  white-space: nowrap;
}

1. .blok-kode memakai pre — indentasi dan pindah baris kode tampil persis seperti di berkas sumber.
2. .konten-pengguna memakai pre-wrap — enter yang diketik pengguna pada kolom pesan atau ulasan tetap tampil, sementara baris yang kepanjangan tetap melipat otomatis sehingga tidak meluber keluar kotak.
3. .waktu-komentar memakai nowrap — teks pendek seperti “12 menit lalu” tidak dipecah menjadi dua baris saat ruangnya sempit.

Pola ketiga layak diwaspadai: nowrap pada teks panjang membuat halaman bergeser horizontal di ponsel. Simpan nowrap untuk teks pendek yang dipastikan tidak menabrak batas — label, status, waktu, atau item menu.

Demo berikut membandingkan dua nilai itu pada teks yang sama:

Markup kedua kotak sama persis; yang membedakan hanya nilai white-space-nya.

Kasus pre-line untuk Teks Naratif Pengguna #

Sisanya sering terjebak di antara dua pilihan: pre-wrap mempertahankan semua spasi, sementara normal menghilangkan pindah baris. Untuk komentar panjang yang diketik pengguna, pre-line menawarkan titik tengah:

.komentar-pengguna {
  white-space: pre-line;
}

Panduan memilihnya sederhana — pesan pendek ala chat yang formatnya bermakna cocok dengan pre-wrap, sedangkan teks naratif yang hanya butuh pindah barisnya saja cocok dengan pre-line.

Menyambung ke Pemotongan Teks #

Kombinasi nowrap dengan overflow: hidden dan text-overflow: ellipsis membentuk resep elipsis yang terkenal — teks satu baris yang terpotong dan ditutup tanda “…”. Resep itu menuntut ketiga property sekaligus; kita bedah lengkap pada chapter berikutnya.

Kesalahan Umum #

Ringkasan #

white-space menentukan nasib spasi, tab, dan pindah baris: normal dan pre-line meringkas spasi, pre dan pre-wrap mempertahankannya, sedangkan nowrap menahan teks pada satu baris. Pilihan nilai harus mengikuti sumber teksnya — kode program, isi pesan pengguna, atau label pendek. Dari semua nilai itu, nowrap menjadi bahan utama resep elipsis; chapter berikutnya merakitnya bersama overflow dan text-overflow.