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>

   Salin selepas log masuk

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>

   Salin selepas log masuk

   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>

   Salin selepas log masuk

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!