Kita semua tahu bahwa tag <pre> dapat mendefinisikan teks yang telah diformat sebelumnya, dan penerapan umumnya adalah untuk mewakili kode sumber komputer. Teks yang diapit dalam elemen pra biasanya mempertahankan spasi putih dan baris baru, namun sayangnya saat Anda menulis kode di dalam tag <pre>, jika Anda tidak membungkus baris baru secara manual, baris tersebut juga akan disimpan untuk Anda, bukan Jeda baris.
Saat ini, Anda dapat menggunakan overflow:auto; (ketika kode melebihi batas penampung, kotak gulir akan ditampilkan), tetapi metode ini tidak cocok untuk semua browser utama, dan beberapa browser akan langsung memotong konten yang terlampaui.
Karena tidak banyak tempat yang menggunakan kode sumber di situs ini, saya tidak terlalu peduli dengan masalah ini sebelumnya. Belum lama ini, seorang netizen yang antusias melaporkan masalah ini di QQ, jadi ketika saya mengubah tema kali ini, saya melihatnya untuk solusi dan membagikannya.
| pra { spasi putih: pra-bungkus; /* css-3 */ spasi: -moz-pre-wrap; /* Mozilla, sejak 1999 */ spasi: -pra-bungkus; /* Opera 4-6 */ spasi: -o-pra-bungkus; /* Opera 7 */ bungkus kata: kata putus; /* Internet Explorer 5.5+ */ } |
Solusi CSS ini dapat membuat teks di tag awal terbungkus secara otomatis. Saya mengujinya di semua browser yang saya miliki, dan semuanya mendukung IE6, IE7, IE8, Firefox, Opera, Safari dan Chrome.
Itu hanya melampaui batas jika Anda mengecilkan jendela menjadi kurang dari 20 karakter.