Bagaimana untuk Mencapai Pembungkusan Perkataan Merentas Pelayar Tanpa Memecah Ruang?

Pembungkusan Perkataan Merentas Penyemak Imbas Tanpa Memecah Ruang

Menangani cabaran membungkus teks yang panjang dan tidak terputus dalam div terhad boleh menjadi teka-teki silang penyemak imbas. Dengan pengehadan pelbagai sifat dan teknik CSS, mencari penyelesaian yang disokong secara universal terbukti sukar difahami.

Penyelesaian Potensi dan Kelemahannya

Percubaan untuk menyelesaikan isu ini menggunakan sifat limpahan gagal memastikan keterlihatan teks yang lengkap. Memperkenalkan &malu; ke dalam teks melalui JavaScript atau skrip sebelah pelayan menghadapi isu keserasian dalam Safari dan kerumitan mencari peletakan optimum untuk aksara ini. Menyuntik teks ke dalam elemen tersembunyi untuk mengukur lebar mengimbangi memerlukan kos prestasi yang ketara.

Fon monospace dan pembungkus perkataan CSS3: sifat putus-kata menawarkan harapan, tetapi kedua-duanya tidak mempunyai sokongan penyemak imbas universal. Menyuntik tag menyediakan beberapa utiliti, tetapi mengukur titik putus tetap menjadi halangan. Menambah jeda selepas setiap aksara adalah tidak cekap dan intensif ingatan.

Penyelesaian Menjanjikan

Mujurlah, CSS menawarkan penyelesaian mudah dan merentas penyemak imbas dalam bentuk sifat ruang putih. Dengan menggunakan peraturan CSS berikut, pembungkusan teks boleh dicapai secara konsisten merentas semua penyemak imbas utama:

.wordwrap {
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */ 
}

Kelas CSS ini boleh digunakan untuk membungkus teks dalam div dengan lebar tertentu, membenarkan pembentangan dan kebolehbacaan yang lebih baik tanpa menjejaskan interaksi atau kebolehcapaian pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Pembungkusan Perkataan Merentas Pelayar Tanpa Memecah Ruang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!