Bagaimana untuk Melaksanakan Elipsis dalam Teks Dipenggal dengan Elemen Boleh Diubah Saiz?

Sisipan Ellipsis dalam Teks Terpenggal

Untuk melaksanakan elips di tengah-tengah teks dalam elemen boleh ubah saiz, pertimbangkan pendekatan berikut:

Langkah 1: Pengisytiharan Atribut Data

Dalam HTML, masukkan teks penuh dalam atribut data-* tersuai, seperti:

Langkah 2: Pendengar Acara

Tugaskan pendengar acara untuk memuatkan dan mengubah saiz kepada fungsi JavaScript.

Langkah 3: Fungsi Ellipsis

Gunakan fungsi JavaScript berikut untuk mengendalikan sisipan elipsis:

<code class="javascript">function start_and_end(str) {
  if (str.length > 35) {
    return str.substr(0, 20) + '...' + str.substr(str.length - 10, str.length);
  }
  return str;
}</code>

Laraskan nilai (cth., 20 dan 10) untuk pemangkasan yang berbeza.

Langkah 4: Sisipan InnerHTML

Dalam fungsi pendengar acara, baca data asal atribut dan letakkannya dalam HTML dalaman teg span:

<code class="javascript">mySpan.innerHTML = start_and_end(mySpan.getAttribute("data-original"));</code>

Langkah 5: Petua Alat (Pilihan)

Untuk menyediakan petua alat untuk pengguna dengan rentetan penuh , tambahkan teg abbr dengan atribut tajuk:

...

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Elipsis dalam Teks Dipenggal dengan Elemen Boleh Diubah Saiz?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!