Website Bisnis
CSS text-wrap: balance
TL;DR:
text-wrap: balanceadalah nilai properti CSS yang membuat browser mendistribusikan jumlah karakter per baris secara merata pada blok teks pendek. Hasilnya: heading, judul kartu, dan tagline terlihat seimbang seperti dirapikan manual. Didukung Chrome 114+, Safari 17.5+, Firefox 121+ per April 2026.
Apa itu text-wrap: balance?
text-wrap adalah properti CSS yang mengatur cara browser memecah baris pada blok teks. Nilai balance meminta browser menghitung pemecahan baris paling seimbang untuk heading atau paragraf pendek, biasanya di bawah 6 baris. Sebelum properti ini ada, marketer dan desainer harus menyisipkan <br> manual atau pakai library JavaScript seperti Balance Text untuk mencegah heading "menggantung" satu kata di baris terakhir.
Fungsi text-wrap: balance mirip kerja editor majalah yang mengatur lebar kolom agar tipografi enak dibaca. Pelajari juga container queries untuk komponen yang adaptif dan selector :has() untuk kontrol gaya kontekstual.
Cara Pakai dan Batasan
| Aspek | Detail |
|---|---|
| Sintaks | h1, h2, h3 { text-wrap: balance; } |
| Target ideal | Heading 2-6 baris, tagline, judul kartu |
| Batas browser | Chrome dan Safari membatasi maksimal 6 baris untuk performa |
| Fallback | Browser lama akan memakai wrap default tanpa error |
| Properti terkait | text-wrap: pretty untuk paragraf panjang yang hindari satu kata "yatim" di baris terakhir |
Gunakan pada heading dan judul kartu produk. Hindari pada paragraf isi panjang karena pretty lebih cocok untuk konteks tersebut.
Kenapa Penting?
Heading yang seimbang menurunkan beban kognitif pembaca dan meningkatkan persepsi profesionalisme website. Bagi marketer Indonesia yang menggarap landing page, judul kartu produk, atau headline pricing, text-wrap: balance memangkas kebutuhan tweaking manual setiap kali copywriting diubah. Properti ini juga tidak menambah JavaScript ke bundle sehingga tidak mengganggu Core Web Vitals seperti LCP.
Konteks lokal: banyak website UMKM di Indonesia memakai headline berbahasa Indonesia yang panjangnya bervariasi antara halaman. Tanpa balance, satu kata sering "yatim" di baris akhir dan merusak hierarki visual landing page. Lihat juga LCP untuk menjaga loading hero section dan CTA yang efektif.
Pertanyaan Umum
Apakah text-wrap: balance memperlambat website?
Tidak signifikan. Browser melakukan kalkulasi sekali saat render dan membatasi efek pada blok teks pendek. Pengukuran web.dev menunjukkan dampak performa di bawah 5 ms untuk heading umum.
Apa beda balance dan pretty?
balance menyeimbangkan jumlah karakter setiap baris untuk teks pendek. pretty mencegah satu kata "yatim" di baris terakhir paragraf panjang. Pakai balance untuk heading, pretty untuk body copy.
Bagaimana fallback untuk browser lama?
Browser yang belum mendukung akan memakai pemecahan baris default. Tidak ada layout yang rusak, hanya kehilangan efek seimbang. Aman dipakai tanpa polyfill.
Istilah Terkait