Bagaimanakah Saya Boleh Mencapai Pembungkusan Kata Silang Pelayar dalam Elemen Div?

Balut Kata Penyemak imbas silang untuk Rentetan Lanjutan dalam Div

Walaupun Internet Explorer menawarkan gaya bungkus perkataannya sendiri, mencari sambungan silang penyelesaian penyemak imbas untuk membungkus teks dalam div adalah kebimbangan biasa. Artikel ini meneroka kedua-dua kaedah CSS dan JavaScript untuk menangani cabaran ini.

Pendekatan CSS

CSS menyediakan beberapa pilihan untuk membungkus perkataan rentetan panjang dalam div:

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.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 */
}

Pendekatan JavaScript

Walaupun bukan seperti elegan sebagai CSS, JavaScript juga boleh mencapai pembungkusan perkataan. Satu pendekatan ialah menggunakan fungsi wordwrap:

function wordwrap(str, width) {
  if (!width) { width = 80; }

  var re = new RegExp(".{" + width + "}(\s|$)|\S+\S{0," + (width - 1) + "}", "g");
  return str.match(re).join("\n");
}

Memohon pada Div

Untuk menggunakan sama ada pendekatan pada div, gunakan kod yang sesuai dalam CSS anda atau JavaScript fail dan tetapkan kelas atau ID yang berkaitan kepada elemen div.

Untuk CSS kaedah:

<div class="wordwrap">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit mi nibh, id sagittis tellus maximus eget. Mauris ut pharetra est, eu mattis quam.
</div>

Untuk kaedah JavaScript:

<div>

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