Bagaimanakah Saya Boleh Membungkus Perkataan Panjang dengan Amanah dalam Div Merentasi Pelayar Berbeza?

Membungkus Perkataan Panjang dalam Div: Panduan Merentas Pelayar

Walaupun Internet Explorer menawarkan gaya bungkus perkataan, individu boleh mencari penyelesaian merentas platform untuk perkataan -membungkus rentetan panjang dalam div. Artikel ini meneroka kedua-dua kaedah CSS dan JavaScript untuk mencapai objektif ini.

Kaedah CSS:

CSS menyediakan beberapa sifat yang boleh mendayakan pembungkusan perkataan. Coretan berikut harus berfungsi dalam kebanyakan penyemak imbas:

.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 */
}

Dengan menggunakan kelas wordwrap pada div yang mengandungi teks, penyemak imbas akan secara automatik membalut perkataan panjang agar sesuai dengan lebar yang tersedia.

Kaedah JavaScript :

Jika CSS bukan pilihan, JavaScript juga boleh digunakan untuk mensimulasikan pembungkusan perkataan. Satu pendekatan melibatkan membalut setiap aksara secara individu dalam elemen span:

function wrapWords(div) {
  var text = div.innerHTML;
  var wrappedText = "";
  for (var i = 0; i < text.length; i++) {
    wrappedText += "<span>" + text[i] + "</span>";
  }
  div.innerHTML = wrappedText;
}

Fungsi ini berulang ke atas aksara, mencipta span untuk setiap aksara, dan kemudian memasukkan teks yang dibalut kembali ke dalam div.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membungkus Perkataan Panjang dengan Amanah dalam Div Merentasi Pelayar Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!