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

Elipsis dalam Teks: Mencapai Gaya Mac

Cabaran:

Melaksanakan elipsis ( " ...") di tengah-tengah teks dalam elemen boleh ubah saiz. Ellipsis sepatutnya hilang apabila lebar elemen sepadan dengan lebar teks penuh.

Penyelesaian:

1. Tambahkan Atribut Data pada HTML:

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

   <span data-original="your string here"></span>

2. Pendengar Acara JavaScript:

   Tambahkan pendengar acara pada pemuatan dan ubah saiz acara elemen. Pendengar ini harus mencetuskan fungsi JavaScript yang akan:

   • Mendapatkan semula teks asal daripada atribut data-*
   • Letakkan teks dalam HTML dalaman bagi elemen span

3. Fungsi Ellipsis:

   Buat fungsi elipsis yang memangkas teks jika ia melebihi panjang tertentu. Contohnya:

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

   Sesuaikan panjang teks dan nilai kedudukan mengikut keperluan.

4. Petua alat untuk Teks Penuh:

   Untuk kebolehaksesan tambahan, pertimbangkan untuk menambah tag abbr pada elipsis dengan petua alat yang memaparkan teks penuh:

   <code class="html"><abbr title="full string">...</abbr></code>

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