Text Wrapping

Teks di web melipat baris secara otomatis mengikuti lebar wadahnya, dan selama ini kita menyerahkan perilaku itu ke nilai default. Namun ada banyak kasus yang menuntut kontrol: kode yang harus mempertahankan indentasi, URL panjang yang memaksa wadah melebar, judul dua baris yang ingin seimbang panjangnya. Sekumpulan properti text wrapping mengatur semua itu — white-space untuk perilaku spasi dan pelipatan, overflow-wrap/word-break untuk kata yang tidak muat, hyphens untuk pemenggalan, dan text-wrap untuk kualitas pemecahan baris.

white-space: Mengatur Spasi dan Pelipatan #

white-space menentukan dua hal sekaligus: bagaimana rangkaian spasi dan enter pada HTML diperlakukan, dan apakah teks boleh melipat. Lima nilai yang paling sering dipakai:

Dari tabel itu terlihat pola masing-masing nilai: nowrap memaksa teks berada dalam satu baris (umum untuk label yang tidak boleh patah, dengan konsekuensi perlu diantisipasi overflow), pre mempertahankan format persis seperti di HTML (asal-usul namanya dari elemen <pre>), pre-wrap mempertahankan format tetapi tetap boleh melipat (cocok untuk log atau blok kode yang responsif), dan pre-line hanya menghormati enter sementara spasi beruntun dirangkai.

Kata yang Tidak Muat: overflow-wrap dan hyphens #

Mesin pelipat memecah teks pada spasi, sehingga satu kata tanpa spasi yang lebih panjang dari wadah akan meluber (overflow). URL panjang adalah kasus klasiknya. Dua properti menawarkan solusi berbeda: overflow-wrap dengan nilai break-word atau anywhere membolehkan browser memecah kata di titik mana pun saat kata tersebut memang tidak muat, sedangkan word-break dengan nilai break-all memecah di titik mana pun tanpa syarat — dipakai utamanya untuk bahasa yang tidak memakai spasi. Untuk kebanyakan kasus, overflow-wrap: anywhere adalah pilihan yang lebih bijak karena hanya aktif saat diperlukan.

Pemenggalan manusiawi diserahkan ke hyphens: auto: browser memenggal kata mengikuti kamus bahasa (perlu atribut lang yang benar pada HTML). Kombinasi ini melengkapi diskusi text-align: justify pada chapter sebelumnya. Bila kita ingin menandai titik pelipatan yang boleh dilakukan pada satu kata panjang tertentu, HTML menyediakan elemen <wbr> (word break opportunity) — alternatif tanpa CSS yang tepat untuk istilah teknis seperti nama berkas panjang. Sebaliknya, word-break: keep-all melakukan kebalikan dari break-all: kata dijaga utuh dan pelipatan hanya terjadi pada spasi, nilai yang relevan untuk teks berbahasa Cina, Jepang, atau Korea.

text-wrap: balance dan pretty #

Properti text-wrap mengatur kualitas pemecahan baris, bukan kebolehannya. Nilai balance — Baseline sejak 2024 — menyusun baris-baris judul agar panjangnya seimbang; judul yang tadinya “Kualitas Tipografi Halaman Web panjang sekali di baris pertama” menjadi dua baris yang hampir sama panjang. Nilai pretty mengoptimalkan paragraf agar tidak ada satu kata sendirian di baris terakhir (orphan). Karena keduanya merupakan peningkatan progresif, pola amannya menulis nilai default dahulu lalu diikuti nilai baru — browser lama memakai baris pertama dan mengabaikan baris yang tidak dikenalnya:

.judul-artikel {
  text-wrap: wrap;
  text-wrap: balance;
}
.paragraf {
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

Pendekatan yang sama dapat ditulis eksplisit dengan @supports, bila kita ingin menambahkan penyesuaian lain khusus browser yang mendukung:

.judul-artikel { text-wrap: wrap; }

@supports (text-wrap: balance) {
  .judul-artikel { text-wrap: balance; }
}

Hasil di Browser:

Enam baris demo tampil dengan perilaku melipat yang berbeda: teks
nowrap berhenti melipat, pre-wrap dan pre-line mempertahankan enter
dengan perlakuan spasi yang berbeda, kata panjang tanpa spasi dipecah
oleh overflow-wrap: anywhere, dan judul balance tersusun dua baris
yang panjangnya seimbang. Nilai computed white-space tercatat "nowrap",
"pre-wrap", dan "pre-line"; text-wrap tercatat "balance" dan "pretty";
word-break tercatat "break-all".

Kontrol wrapping menuntaskan kotak peralatan tipografi harian kita. Chapter terakhir section ini, Responsive Typography , merangkai semuanya menjadi sistem ukuran yang mengikuti layar.