Bagaimana Anda Boleh Mencapai Pembungkusan Kata Silang Pelayar dengan CSS dan JavaScript?

Pembungkusan Perkataan Merentas Pelayar dalam CSS dan JavaScript

Dalam era digital ini, mengendalikan blok teks yang panjang dan tidak terputus dalam elemen lebar yang ditentukan adalah cabaran biasa. Isu ini amat menonjol dalam pembangunan web, di mana mengekalkan kebolehbacaan URL dan urutan panjang yang lain adalah penting.

Secara tradisinya, pembangun telah bergantung pada pelbagai teknik untuk menangani isu ini, masing-masing mempunyai set kelemahannya sendiri:

• limpahan: tersembunyi / auto / tatal: Menyembunyikan teks berlebihan, tetapi gagal memaparkannya tanpa menatal.
• Menyuntik : Menyokong teks membalut dalam Firefox, tetapi pecah apabila disalin dan ditampal dalam Safari.
• Mengukur lebar teks: Tidak praktikal kerana sisipan DOM yang mahal diperlukan untuk pengukuran yang tepat.
• Fon monospace: Zum boleh memesongkan teks dan mengehadkan pilihan penggayaan.

Walau bagaimanapun, penyelesaian yang menjanjikan telah muncul yang memenuhi keperluan merentas pelayar:

CSS putih -ruang: pra-bungkus

Sifat CSS ini membenarkan teks panjang dibalut dalam bekasnya tanpa menambah aksara yang tidak perlu atau membatalkan HTML. Ia disokong oleh:

• Chrome
• Firefox
• Opera
• Internet Explorer 5.5

Penggunaan:

.wordwrap {
  white-space: pre-wrap;
}

Pelaksanaan mudah ini akan membolehkan pembungkusan perkataan untuk mana-mana elemen dengan kelas "wordwrap".

Nota:

Untuk kes di mana pembalut perkataan tidak diingini, kelas "no_wordwrap" boleh digunakan:

.no_wordwrap {
  word-wrap: normal;
}

Atas ialah kandungan terperinci Bagaimana Anda Boleh Mencapai Pembungkusan Kata Silang Pelayar dengan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!