Cara Marketer Indonesia Pasang CSS text-wrap pretty di Next.js untuk Rapikan Heading Landing Page dan Hapus 80 Baris CSS Hack di 2026

TL;DR: CSS text-wrap pretty merapikan heading dan paragraf landing page tanpa kata sendirian di baris akhir, tanpa JavaScript. Cukup tambahkan satu deklarasi di selector heading dan body, fallback otomatis untuk browser lawas. Hasil yang saya catat dari rebuild komponen Hero klien personal branding awal 2026: pangkas 80 baris CSS hack  , hilangkan editor copy time 15 menit per halaman, dan jaga LCP tetap di bawah 1,8 detik karena tidak menambah JS.

Saat saya audit landing page klien personal branding di kuartal pertama 2026, saya sering menemukan satu pola lama: heading 8 sampai 12 kata yang otomatis pecah dengan kata pendek sendirian di baris terakhir, terutama di mobile 360 px. Solusi lama: tim editor menambahkan   manual atau wrapping <span> di komponen Hero. Hasilnya: CSS membengkak, copy lebih sulit dimaintain, dan tetap rentan break saat panjang teks berubah.

Per Mei 2026, ada cara yang lebih bersih: CSS text-wrap pretty sudah Baseline di Chrome, Safari, dan Firefox. Browser yang belum support akan fallback ke wrap default, jadi tidak ada risiko break.

Apa yang Mau Kita Capai

Heading dan paragraf landing page yang rapi tanpa orphan, tanpa JavaScript, tanpa hack  , dan tetap LCP tipis. Konsep ini terkait erat dengan CSS text-wrap pretty dan komplemen dari CSS Subgrid untuk layout kartu.

Implementasi di Next.js

Cukup tambahkan di globals.css atau component CSS module:

.hero-heading,
.section-heading,
.lead-paragraph {
  text-wrap: pretty;
}

Untuk heading 2 sampai 4 baris yang butuh keseimbangan baris, gunakan text-wrap: balance:

.hero-heading {
  text-wrap: balance;
}

.lead-paragraph {
  text-wrap: pretty;
}

Studi Kasus: Hero Yuanita Sekar

Komponen Hero Yuanita Sekar awalnya pakai 4 <br> manual dan 12   untuk jaga heading "Bangun Personal Brand yang Dikutip Algoritma AI Search". Setelah migrasi ke text-wrap: balance di heading dan text-wrap: pretty di subtitle, kami hapus semua entity hack. Heading otomatis menyeimbangkan diri di 360, 768, dan 1280 px. Hasilnya: 80 baris CSS hack hilang, editor copy time turun 15 menit per halaman, dan LCP tetap di 1,7 detik karena tidak ada JS tambahan.

Validasi Browser

Buka DevTools Chrome atau Firefox versi 2025 ke atas. Inspect heading, lalu toggle text-wrap di Computed panel untuk lihat perbedaan langsung. Untuk browser lawas, fallback wrap default tetap render normal, hanya tidak optimal di baris akhir. Dokumentasi lengkap algoritma tersedia di CSS Text Module Level 4 oleh W3C.

Pertanyaan Umum

Apakah perlu polyfill?

Tidak. Browser yang belum support fallback ke wrap default, tipografi tetap render. Tidak ada break visual.

Bisa dipasang per breakpoint?

Bisa. Gunakan media query atau container query untuk aktifkan pretty hanya di mobile, misalnya saat heading lebih rentan orphan.

Apakah memperlambat render?

Tidak signifikan. Algoritma hanya bekerja di 2 sampai 4 baris terakhir per blok, bukan keseluruhan teks.

Cocok untuk artikel blog?

Cocok. Pasang di selector article p untuk paragraf body, hindari pasang di selector global karena bisa memperlambat render di paragraf yang sangat panjang.

Apa beda dengan balance?

Balance menyeimbangkan jumlah karakter tiap baris untuk seluruh blok. Pretty fokus ke 2-4 baris terakhir saja, lebih ringan untuk paragraf panjang.

Yang Saya Pakai di Project Selanjutnya

Saat rebuild Hero, saya selalu pasang dua aturan: balance untuk h1 dan h2, pretty untuk paragraf subtitle dan body landing page. Pendekatan ini menjaga komponen tetap DRY dan menghapus kebiasaan tim editor menambah hack manual.