Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencapai Pembungkusan Kata Silang Pelayar dalam Div HTML?

Bagaimana untuk Mencapai Pembungkusan Kata Silang Pelayar dalam Div HTML?

Mary-Kate Olsen
Lepaskan: 2024-12-18 00:50:13
asal
911 orang telah melayarinya

How to Achieve Cross-Browser Word Wrapping in HTML Divs?

Pembungkusan Perkataan Merentas Pelayar Teks Panjang dalam Div

Soalan:

Bagaimana anda boleh melaksanakan pelayar silang bungkus perkataan untuk rentetan panjang dalam HTML divs?

Jawapan:

Untuk memastikan pembungkusan perkataan merentasi pelayar yang berbeza, sifat CSS berikut boleh digunakan:

.wordwrap {
   white-space: pre-wrap;      /* CSS3 */
   white-space: -moz-pre-wrap; /* Firefox */
   white-space: -pre-wrap;     /* Opera <7 */
   white-space: -o-pre-wrap;   /* Opera 7 */
   word-wrap: break-word;      /* IE */
}
Salin selepas log masuk

Penjelasan:

  • ruang putih: pra-balut: Penyemak imbas tanpa sokongan balutan perkataan tertentu akan membalut baris pada sempadan ruang putih.
  • ruang putih: -moz-pra-bungkus: Sifat khusus Firefox untuk mendayakan tingkah laku pra-bungkus.
  • ruang-putih: -pra-bungkus: Versi Opera yang lebih lama sebelum 7.
  • ruang putih: -o-pra-bungkus: Opera 7.
  • bungkus perkataan: pecah-perkataan: Sifat khusus IE untuk memecahkan perkataan pada titik sempang.

Oleh menggabungkan sifat ini, teks dalam div dengan kelas "wordwrap" akan dibalut pada mana-mana titik pecah aksara, memastikan keserasian merentas pelayar.

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan