Perintah dan konteks
Sebuah situs konten internasional memiliki heading kartu yang menyisakan satu kata di baris yang sempit, sementara paragraf panjang sering kali diakhiri dengan satu kata orphan. Tim desain menginginkan perbaikan CSS satu baris, namun halaman tersebut juga harus mendukung pengeditan, peramban versi lama, dan font dinamis. Bandingkan text-wrap: balance, text-wrap: pretty, wrap normal, dan stable, kemudian usulkan rencana peluncurannya.
Pertanyaan ini sangat cocok untuk wawancara frontend, design-system, dan platform konten. Kuncinya adalah memperlakukan pembungkusan teks (wrapping) sebagai perilaku tata letak, bukan sebagai lebar tetap atau hasil pengukuran JavaScript.
Apa yang diuji oleh pewawancara
Jawaban yang kuat menggunakan balance untuk heading pendek dan kutipan, mempertimbangkan pretty untuk prosa yang lebih panjang dengan tetap menyadari biaya komputasinya yang lebih tinggi, dan menjelaskan bahwa kedua nilai tersebut tidak mengubah ukuran inline elemen maupun menimpa white-space: nowrap. Jawaban tersebut juga mencakup stable untuk contenteditable, pengujian multibahasa, fallback statis, dan aksesibilitas.
Pertanyaan klarifikasi untuk diajukan terlebih dahulu
- Apakah teks tersebut berupa heading, ringkasan kartu, isi teks (body copy), atau bidang yang dapat diedit, dan berapa baris yang diharapkan?
- Apakah kita mencegah kata orphan, atau mencoba membuat panjang baris terlihat lebih merata?
- Apakah gaya kontainer mencakup
white-space, tinggi tetap (fixed height), pemotongan (clipping), atauline-clamp? - Bahasa, status pemuatan font, dan versi peramban mana saja yang masuk dalam cakupan?
- Apakah peramban versi lama harus mempertahankan pemenggalan baris yang sama persis, atau apakah pembungkusan normal merupakan fallback yang dapat diterima?
Kerangka jawaban 30 detik
"Saya akan memilih berdasarkan jenis konten: text-wrap: balance untuk heading pendek, mengevaluasi pretty untuk prosa hanya jika kontrol orphan diperlukan, mempertahankan konten biasa pada wrap, dan mempertimbangkan stable untuk area yang dapat diedit. Nilai-nilai ini mengubah soft wrapping, bukan lebar elemen; white-space: nowrap, tinggi tetap, dan clipping masih memerlukan keputusan terpisah. Saya akan mempertahankan nilai default yang mudah dibaca, menyempurnakan pada peramban yang didukung, serta menguji bahasa, font, ukuran responsif, dan perilaku pengeditan baik dari segi visual maupun performa."
Jawaban mendalam langkah demi langkah
Langkah 1: Pisahkan keempat strategi
wrap mengikuti aturan pemenggalan baris normal, sedangkan nowrap menonaktifkan soft wrapping. balance mencari panjang baris yang lebih merata untuk teks pendek seperti heading dan kutipan. pretty menggunakan algoritma yang lebih lambat untuk menyempurnakan teks yang lebih panjang dan mengurangi orphan. stable menargetkan contenteditable, menjaga baris-baris sebelumnya lebih stabil saat pengguna mengedit.
Langkah 2: Berikan batas yang dapat dikontrol pada heading
Penyeimbangan membutuhkan peluang pemenggalan baris yang nyata. Tetapkan max-inline-size atau lebar kontainer yang masuk akal sebelum menerapkan text-wrap: balance; string satu baris tidak memiliki apa pun untuk diseimbangkan. Hindari pemenggalan manual <br> untuk bahasa Inggris atau Mandarin karena terjemahan, font, dan lebar viewport akan mengubah hasilnya.
.card-title {
max-inline-size: 24ch;
text-wrap: balance;
}Langkah 3: Gunakan pretty secara cermat
pretty cocok untuk isi teks, penjelasan, dan kutipan yang lebih panjang, tetapi memerlukan lebih banyak komputasi daripada pembungkusan biasa. Gunakan jika kualitas teks sebanding dengan biayanya dan hindari selektor universal. Untuk heading satu atau dua baris, balance adalah pilihan yang lebih langsung.
Langkah 4: Selesaikan konflik white-space dan clipping
white-space: nowrap secara eksplisit meminta untuk tidak membungkus teks, yang bertentangan dengan penyeimbangan. Hapus atau timpa nilai ini sebelum mengharapkan baris yang seimbang. Tinggi tetap, overflow: hidden, dan line-clamp masih dapat memotong teks, sehingga produk harus memutuskan apakah akan menambah tinggi, menampilkan elipsis, atau memperlihatkan teks lengkap.
Langkah 5: Pahami batasan performa
Peramban mencoba beberapa solusi pemenggalan baris. Dokumentasi MDN dan Chrome menyarankan untuk mempertahankan balance pada teks pendek dan mempertimbangkan pretty untuk prosa yang lebih panjang; jangan mengklaim salah satunya selalu lebih cepat daripada JavaScript. Ukur tata letak, pemuatan font, dan rendering daftar panjang pada perangkat nyata.
Langkah 6: Tangani perubahan bahasa dan font
Heading yang sama memiliki peluang pemenggalan yang berbeda dalam bahasa Mandarin, Inggris, Jerman, dan Arab. Uji pergantian bahasa, font fallback, zoom, layar sempit, dan layar lebar. Kesepakatannya adalah tidak ada luapan (overflow), hierarki yang mudah dibaca, dan konten yang lengkap, bukan snapshot baris yang persis sama pada satu bahasa.
Langkah 7: Pilih stable untuk konten yang dapat diedit
Saat pengguna mengedit di tengah-tengah contenteditable, reflow dapat memindahkan baris di dekat tanda sisip (caret). text-wrap: stable dapat menjaga baris sebelum pengeditan tetap lebih stabil, namun ini bukan strategi mempercantik heading dan tidak mengatur tinggi bidang input. Gunakan hanya jika stabilitas pengeditan adalah masalah sebenarnya.
Langkah 8: Rancang peningkatan progresif dan verifikasi
Mulailah dengan wrap biasa dan tinggi yang dapat bertambah; tambahkan balance atau pretty jika didukung. Susun peningkatan bertingkat menggunakan CSS yang peka kemampuan peramban dan pastikan konten penting tetap dapat digunakan tanpanya. Verifikasi computed style, overflow, CLS, biaya daftar panjang, jalur font, dan urutan pembaca layar (screen-reader).
Kompromi dan batasan
balance meningkatkan ritme visual teks pendek tetapi tidak menyusutkan elemen; batas kartu, bayangan, dan perataan tetap berasal dari kontainer. pretty dapat menyempurnakan prosa sekaligus menambah beban kerja tata letak. Keduanya tidak menggantikan keputusan editorial, aturan pemenggalan baris, overflow-wrap, atau ekspansi teks lengkap yang aksesibel.
Jangan menganggap dukungan peramban saat ini sebagai jaminan permanen. CSS Text Level 4 masih memiliki perbedaan implementasi, jadi ujilah matriks peramban produk Anda. Pertahankan jalur pembungkusan normal untuk heading penting dan sediakan nama atau ekspansi yang aksesibel untuk konten yang terpotong.
Rencana peluncuran dan bukti
Uji coba pada satu komponen heading, ringkasan, dan isi teks. Catat bahasa, baris maksimum, ukuran kontainer, dan status font. Gunakan balance untuk heading, coba pretty hanya jika masalah orphan dapat direproduksi, dan evaluasi stable secara terpisah di editor. Periksa overflow, pergeseran tata letak (layout shift), dan stabilitas kursor sisip di Chromium, Firefox, Safari, serta peramban lama yang diwajibkan.
Dokumentasikan jenis konten, baris maksimum, prasyarat white-space, gaya fallback, dan metrik pengukuran. Jalankan visual regression setiap kali font, lebar kontainer, atau terjemahan berubah sehingga satu snapshot tidak menyembunyikan regresi pemenggalan multibahasa.
Kesalahan umum dan pertanyaan lanjutan
Menerapkan balance ke setiap elemen
Penggunaan secara global membuang-buang komputasi dan tidak memperbaiki prosa panjang. Batasi penggunaannya pada heading, kutipan, dan teks pendek yang memang diuntungkan oleh penyeimbangan.
Mengasumsikan balance mengubah lebar elemen
Atribut ini hanya mengubah soft wrapping; tidak menyusutkan ukuran kotak (shrink-wrap). Tata letak dan max-inline-size tetap mengontrol ukuran inline kartu.
Mengabaikan nowrap atau tinggi tetap
Aturan tersebut dapat menyebabkan teks meluap atau terpotong. Periksa computed style sebelum memutuskan apakah pembungkusan dan penambahan tinggi diizinkan.
Menganggap pretty sebagai solusi orphan tanpa beban performa
Pembungkusan yang lebih baik membutuhkan pemrosesan ekstra. Ukur performa pada daftar panjang dan perangkat berspesifikasi rendah daripada hanya mengandalkan satu demo.
Mengapa tidak menggunakan balance di area yang dapat diedit?
Reflow selama pengeditan dapat menggeser area tanda sisip (caret). Evaluasi stable untuk stabilitas pengeditan dan simpan balance untuk heading presentasi yang bersifat read-only.