Digital Transformation
CSS text-wrap: pretty
TL;DR: CSS text-wrap: pretty adalah nilai property text-wrap yang merapikan baris paragraf dan heading tanpa kata sendirian di baris terakhir, sehingga tipografi terlihat polished tanpa JavaScript atau plugin. Per Mei 2026 sudah Baseline di Chrome, Safari, dan Firefox. Cukup pasang text-wrap: pretty di selector yang relevan, browser yang lawas akan fallback ke wrap default.
Apa itu text-wrap: pretty?
text-wrap: pretty adalah nilai CSS property text-wrap yang memerintahkan browser menggunakan algoritma wrapping yang lebih cerdas. Algoritma ini menghindari orphan (kata pendek sendirian di baris terakhir), dan menjaga rata margin agar lebih estetis di heading panjang atau paragraf marketing. Berbeda dari text-wrap: balance yang menyeimbangkan jumlah karakter per baris, pretty fokus ke 2 sampai 4 baris terakhir saja sehingga performanya ringan bahkan untuk paragraf panjang.
Cara Pakai
.hero-heading,
.section-paragraph {
text-wrap: pretty;
}
| Property | Karakter | Use Case |
|---|---|---|
| text-wrap: pretty | Hindari orphan, optimasi baris akhir | Paragraf, heading panjang |
| text-wrap: balance | Seimbangkan jumlah char tiap baris | Heading 2-4 baris |
| text-wrap: wrap | Default browser | Body text biasa |
Kenapa Penting?
Landing page Indonesia sering punya heading 6 sampai 12 kata yang otomatis pecah dengan kata sendirian di baris terakhir, terutama di mobile 360 px. Dari beberapa rebuild komponen Hero di project klien yang saya bantu di awal 2026, mengganti hack manual dengan text-wrap: pretty memangkas 80 baris CSS dan menghilangkan kerja editor copy. Browser modern menjamin fallback ke wrap default jadi tidak ada risiko break. Referensi resmi tersedia di dokumentasi CSS Text Module Level 4 oleh W3C.
Pertanyaan Umum
Apakah text-wrap: pretty memperlambat render?
Tidak signifikan. Algoritma hanya bekerja di 2 sampai 4 baris terakhir per blok, bukan keseluruhan paragraf.
Bisa dikombinasi dengan font-size responsif?
Bisa. Pretty bekerja di level wrapping, tidak konflik dengan clamp() atau container query untuk font-size.
Istilah Terkait