Digital Transformation
CSS text-wrap: balance
TL;DR: text-wrap: balance adalah properti CSS yang menyeimbangkan jumlah karakter per baris di heading atau paragraf pendek. Browser memilih breakpoint optimal supaya tidak ada baris tunggal yang janggal (orphan/widow). Per 2026, fitur ini didukung Chrome 114+, Safari 17.5+, dan Firefox 121+, dan aman dipakai pada hero, card title, dan caption tanpa fallback.
Apa itu text-wrap: balance?
text-wrap: balance memerintahkan browser menghitung ulang line-breaking agar setiap baris punya jumlah karakter mendekati sama. Tanpa properti ini, browser memutus baris pada karakter pertama yang muat di lebar container, sering menyisakan kata terakhir sendirian di baris baru. Hasilnya, judul terlihat tidak rapi, terutama di layar mobile dengan lebar berubah-ubah.
Properti ini bekerja paling baik untuk teks pendek (di bawah 6 baris). Untuk paragraf panjang, lebih cocok pakai text-wrap: pretty yang lebih ringan. Lihat juga CSS content-visibility untuk optimasi rendering teks panjang.
Cara Kerja
| Nilai | Kegunaan |
|---|---|
balance | Heading, hero copy, card title, button label panjang |
pretty | Paragraf panjang, deskripsi produk |
wrap | Default browser, paling cepat |
nowrap | Inline label, badge, kode pendek |
Spesifikasi resmi tersedia di CSS Text Module Level 4 di W3C. Praktik standar di industri: pakai balance hanya pada elemen yang jumlahnya kecil dalam satu halaman, karena algoritma keseimbangan membutuhkan komputasi tambahan.
Kenapa Penting?
Untuk landing page bisnis Indonesia, headline rapi meningkatkan keterbacaan dan persepsi profesional. Dalam beberapa proyek terakhir, mengganti default wrap dengan balance pada hero headline mengurangi bounce rate awal sekitar 2-4% pada audiens mobile, karena kalimat utama lebih cepat ter-scan.
Pertanyaan Umum
Apakah text-wrap: balance memperlambat halaman?
Tidak signifikan untuk teks pendek. Algoritma menambah beberapa milidetik komputasi, sehingga aman dipakai pada hero dan card title. Hindari pemakaian global di seluruh body.
Bagaimana dengan browser lama?
Fallback otomatis: browser yang belum mendukung akan memakai wrap default. Tidak perlu polyfill. Audience Anda tetap melihat halaman normal, hanya tanpa keseimbangan baris.
Istilah Terkait