Gesaan dan konteks
Sebuah laman kandungan antarabangsa mempunyai tajuk kad yang meninggalkan satu perkataan pada baris yang sempit, manakala perenggan panjang sering berakhir dengan perkataan anak yatim (orphan). Pasukan reka bentuk mahukan penyelesaian satu baris CSS, tetapi halaman tersebut juga mesti menyokong penyuntingan, pelayar lama dan fon dinamik. Bandingkan text-wrap: balance, text-wrap: pretty, wrap biasa dan stable, kemudian cadangkan pelan pelancaran.
Soalan ini sesuai untuk temu duga frontend, sistem reka bentuk (design system) dan platform kandungan. Kuncinya ialah melihat pembalutan teks (wrapping) sebagai tingkah laku reka letak dan bukannya lebar tetap atau hasil pengukuran JavaScript.
Perkara yang diuji oleh penemu duga
Jawapan yang kukuh menggunakan balance untuk tajuk pendek dan petikan, mempertimbangkan pretty untuk prosa yang lebih panjang sambil mengakui kos pengiraannya yang lebih tinggi, dan menjelaskan bahawa kedua-dua nilai tersebut tidak mengubah saiz sebaris (inline size) elemen atau mengatasi white-space: nowrap. Ia juga merangkumi stable untuk contenteditable, ujian pelbagai bahasa, fallback statik dan kebolehcapaian.
Soalan penjelasan untuk ditanya terlebih dahulu
- Adakah teks tersebut merupakan tajuk, ringkasan kad, teks badan (body copy) atau medan boleh sunting, dan berapa banyak baris yang dijangkakan?
- Adakah kita menghalang perkataan anak yatim (orphans), atau cuba menjadikan panjang baris kelihatan lebih sekata?
- Adakah gaya kontena merangkumi
white-space, ketinggian tetap, pemotongan (clipping) atauline-clamp? - Bahasa, status pemuatan fon dan versi pelayar yang manakah berada dalam skop?
- Adakah pelayar legasi mesti mengekalkan pemecahan baris yang sama, atau adakah pembalutan biasa merupakan fallback yang boleh diterima?
Rangka kerja jawapan 30 saat
"Saya akan memilih mengikut jenis kandungan: text-wrap: balance untuk tajuk pendek, menilai pretty untuk prosa hanya apabila kawalan anak yatim penting, mengekalkan kandungan biasa pada wrap, dan mempertimbangkan stable untuk kawasan yang boleh disunting. Nilai-nilai ini mengubah pembalutan lembut (soft wrapping), bukan lebar elemen; white-space: nowrap, ketinggian tetap dan pemotongan masih memerlukan keputusan berasingan. Saya akan mengekalkan lalai yang mudah dibaca, menambah baik untuk pelayar yang disokong, dan menguji bahasa, fon, saiz responsif serta tingkah laku penyuntingan untuk kedua-dua aspek visual dan prestasi."
Jawapan mendalam langkah demi langkah
Langkah 1: Asingkan empat strategi
wrap mengikut peraturan pemecahan baris biasa, manakala nowrap melumpuhkan pembalutan lembut. balance mencari panjang baris yang lebih sekata untuk teks pendek seperti tajuk dan petikan. pretty menggunakan algoritma yang lebih perlahan untuk menambah baik teks yang lebih panjang dan mengurangkan anak yatim. stable menyasarkan contenteditable, mengekalkan baris sebelumnya lebih stabil semasa pengguna menyunting.
Langkah 2: Berikan batas yang boleh dikawal kepada tajuk
Pengimbangan memerlukan peluang pembalutan yang sebenar. Tetapkan max-inline-size atau lebar kontena yang munasabah sebelum menggunakan text-wrap: balance; rentetan satu baris tidak mempunyai apa-apa untuk diimbangi. Elakkan pemecahan <br> manual untuk bahasa Inggeris atau Cina kerana terjemahan, fon dan lebar viewport mengubah hasilnya.
.card-title {
max-inline-size: 24ch;
text-wrap: balance;
}Langkah 3: Gunakan pretty secara sengaja
pretty sesuai untuk teks badan, penjelasan dan petikan yang lebih panjang, tetapi ia memerlukan lebih banyak pengiraan berbanding pembalutan biasa. Gunakannya di mana kualiti teks mewajarkan kos tersebut dan elakkan pemilih sejagat (universal selector). Untuk tajuk satu atau dua baris, balance adalah pilihan yang lebih tepat.
Langkah 4: Selesaikan konflik white-space dan pemotongan
white-space: nowrap secara eksplisit meminta tiada pembalutan, yang bercanggah dengan pengimbangan. Buang atau atasi nilai tersebut sebelum mengharapkan baris yang seimbang. Ketinggian tetap, overflow: hidden dan line-clamp masih boleh memotong teks, jadi produk mesti memutuskan sama ada untuk membesarkan ruang, menunjukkan elipsis atau memaparkan teks penuh.
Langkah 5: Fahami had prestasi
Pelayar mencuba pelbagai penyelesaian pemecahan baris. Dokumentasi MDN dan Chrome mengesyorkan mengekalkan balance pada teks pendek dan mempertimbangkan pretty untuk prosa yang lebih panjang; jangan mendakwa salah satu daripadanya sentiasa lebih pantas daripada JavaScript. Ukur reka letak, pemuatan fon dan pemaparan senarai panjang pada peranti sebenar.
Langkah 6: Tangani perubahan bahasa dan fon
Tajuk yang sama mempunyai peluang pemecahan yang berbeza dalam bahasa Cina, Inggeris, Jerman dan Arab. Uji pertukaran bahasa, fon fallback, zum, skrin sempit dan skrin lebar. Kontrak yang perlu dipenuhi ialah tiada limpahan (overflow), hierarki yang mudah dibaca dan kandungan yang lengkap, bukannya tangkapan baris tepat untuk satu bahasa sahaja.
Langkah 7: Pilih stable untuk kandungan boleh sunting
Apabila pengguna menyunting di bahagian tengah contenteditable, aliran semula (reflow) boleh menggerakkan baris berhampiran tanda sisip (caret). text-wrap: stable boleh mengekalkan baris sebelum suntingan lebih stabil, tetapi ia bukan strategi pengindahan tajuk dan tidak mengurus ketinggian medan. Gunakannya hanya jika kestabilan penyuntingan adalah masalah sebenar.
Langkah 8: Reka bentuk peningkatan progresif dan pengesahan
Mulakan dengan wrap biasa dan ketinggian yang boleh membesar; tambahkan balance atau pretty jika disokong. Lapisi peningkatan tersebut dengan CSS yang menyedari keupayaan pelayar dan pastikan kandungan kritikal boleh digunakan tanpanya. Sahkan gaya terhitung (computed styles), limpahan, CLS, kos senarai panjang, laluan fon dan susunan pembaca skrin.
Pertukaran dan batasan
balance meningkatkan ritma visual teks pendek tetapi tidak mengecilkan elemen; sempadan kad, bayang-bayang dan penjajaran masih datang daripada kontena. pretty boleh menambah baik prosa sambil menambah beban kerja reka letak. Kedua-duanya tidak menggantikan pilihan editorial, peraturan pemecahan baris, overflow-wrap atau peluasan teks penuh yang boleh diakses.
Jangan anggap sokongan pelayar semasa sebagai jaminan kekal. CSS Text Level 4 masih mempunyai perbezaan pelaksanaan, jadi uji matriks produk anda. Kekalkan laluan balutan biasa untuk tajuk kritikal dan sediakan nama atau peluasan yang boleh diakses untuk kandungan yang dipotong.
Pelan pelancaran dan bukti
Rintis satu komponen tajuk, ringkasan dan teks badan. Catatkan bahasa, baris maksimum, saiz kontena dan status fon. Gunakan balance untuk tajuk, cuba pretty hanya apabila masalah anak yatim boleh dihasilkan semula, dan nilai stable secara berasingan dalam editor. Periksa limpahan, pergeseran reka letak (layout shift) dan kestabilan tanda sisip dalam Chromium, Firefox, Safari serta pelayar legasi yang diperlukan.
Dokumenkan jenis kandungan, baris maksimum, prasyarat white-space, gaya fallback dan metrik pengukuran. Jalankan regresi visual setiap kali fon, lebar kontena atau terjemahan berubah supaya satu tangkapan skrin tidak menyembunyikan regresi pemecahan pelbagai bahasa.
Perangkap biasa dan soalan susulan
Menggunakan balance pada setiap elemen
Penggunaan secara menyeluruh membazirkan pengiraan dan tidak menambah baik prosa yang panjang. Hadkannya kepada tajuk, petikan dan teks pendek yang mendapat manfaat daripada pengimbangan.
Menganggap balance mengubah lebar elemen
Ia hanya mengubah pembalutan lembut; ia tidak mengecutkan saiz kotak mengikut kandungan (shrink-wrap). Reka letak dan max-inline-size masih mengawal saiz sebaris kad.
Mengabaikan nowrap atau ketinggian tetap
Peraturan tersebut boleh menyebabkan teks melimpah atau dipotong. Periksa gaya terhitung sebelum memutuskan sama ada pembalutan dan pembesaran ketinggian dibenarkan.
Menganggap pretty sebagai penyelesaian anak yatim percuma
Pembalutan yang lebih baik memerlukan kerja pemprosesan tambahan. Ukur senarai panjang dan peranti berprestasi rendah dan bukannya hanya bergantung pada satu demo.
Mengapa tidak menggunakan balance di kawasan yang boleh disunting?
Aliran semula (reflow) semasa penyuntingan boleh menggerakkan kawasan tanda sisip (caret). Nilai stable untuk kestabilan penyuntingan dan simpan balance untuk tajuk paparan baca sahaja.