Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencapai Pembungkusan Kata Silang Pelayar dalam Elemen Div?

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

Linda Hamilton
Linda Hamiltonasal
2024-12-07 10:16:13481semak imbas

How Can I Achieve Cross-Browser Word Wrapping in a Div Element?

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!

Kenyataan:
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