Bagaimanakah Saya Boleh Melaksanakan Pemangkasan Ellipsis dalam Elemen Teks Boleh Diubah Saiz?

Pemangkasan Ellipsis dalam Saiz Semula Teks

Memangkas teks dengan elipsis ("...") di tengah-tengah kandungan boleh meningkatkan kebolehbacaan apabila Elemen UI mempunyai lebar berubah-ubah. Mencapai kesan ini memberikan cabaran di mana elipsis harus hilang apabila teks dipaparkan secara keseluruhannya.

Untuk melaksanakan elipsis dalam elemen boleh ubah saiz:

1. Gunakan Atribut Data Tersuai:

   • Dalam HTML, tetapkan teks penuh kepada atribut data tersuai:

2. Tetapkan Pendengar Acara:

   • Tambah muatkan dan ubah saiz pendengar acara yang mencetuskan fungsi JavaScript untuk mengisi innerHTML bagi teg span dengan teks asal yang disimpan dalam atribut data.

3. Fungsi Ellipsis:

   • Tentukan a Fungsi JavaScript (cth., "start_and_end") untuk memotong teks:

     <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., 35, 20, 10) seperti yang diperlukan untuk objek dan fon yang berbeza.

4. Interpolasi Dinamik:

   • Pertimbangkan untuk menggunakan interpolasi dinamik untuk menentukan bilangan aksara yang sesuai untuk dipaparkan, berdasarkan saiz fon dan lebar elemen .

5. Kebolehcapaian Petua Alat:

   • Tambah tag abbr pada elipsis untuk mendayakan petua alat dengan teks penuh apabila berlegar di atas.

Dengan melaksanakan langkah-langkah ini, anda boleh memotong teks dengan elipsis dengan berkesan di tengah-tengah elemen teks, memastikan ia hilang apabila elemen itu diregangkan sepenuhnya lebar teks.

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