Bagaimana untuk Mencapai Pembungkusan Kata Silang Pelayar dalam CSS/JS?

Pembungkusan Perkataan dalam CSS/JS: Penyelesaian Silang Penyemak Imbas

Cabaran untuk membungkus rentetan panjang teks dalam lebar DIV yang telah ditetapkan tanpa menatal telah lama membelenggu pembangun web. Untuk menangani perkara ini, pelbagai pendekatan telah diterokai, setiap satu dengan batasannya sendiri.

• Limpahan teknik seperti "limpahan: tersembunyi/auto/skrol" menyekat keterlihatan teks dan membenarkan penatalan, yang tidak diingini dalam senario ini.
• Menyuntik &malu; ke dalam rentetan memerlukan JavaScript atau pengubahsuaian sisi pelayan, tetapi mungkin mengganggu penyalinan dan penampalan dan tidak disokong secara konsisten merentas penyemak imbas.
• Mengukur lebar teks melalui elemen tersembunyi adalah mahal dari segi pengiraan dan boleh membawa kepada tapak beku, terutamanya untuk badan teks yang luas.
• Monospace fon boleh mengganggu pengiraan lebar dan mengehadkan penggayaan teks.

Walaupun calon yang menjanjikan seperti "word-wrap: break-word" dan "" tag, pendekatan ini sama ada tidak mempunyai sokongan pelayar atau memerlukan pengiraan titik pecah yang tepat, yang masih sukar difahami.

Eureka! CSS to the Rescue

Akhirnya, satu kejayaan muncul dalam bidang CSS:

.wordwrap {
    white-space: pre-wrap; /* css-3 */
    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+ */
}

Menggunakan peraturan CSS ini, pembangun boleh mencapai pembungkusan perkataan merentas pelayar tanpa masalah dengan lancar daripada kaedah sebelumnya. Selain itu, anda boleh menggunakan "word-wrap: normal;" peraturan untuk kembali kepada gelagat pembalut lalai.

Penyelesaian ini secara elegan menangani cabaran pembungkusan perkataan, memperkasakan pembangun untuk memaparkan URL panjang dan rentetan teks tanpa gangguan lain dalam cara yang menarik dari segi estetika dan serasi dengan penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Pembungkusan Kata Silang Pelayar dalam CSS/JS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!