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

Mary-Kate Olsen
Lepaskan: 2024-10-29 23:57:29
asal
460 orang telah melayarinya

How Can I Implement Ellipsis Truncation in a Resizable Text Element?

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>
      Salin selepas log masuk
    • 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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!