Bagaimana untuk Mengaktifkan Petua Alat Secara Dinamik untuk Kesan Ellipsis dalam HTML?

Pengaktifan Petua Alat Dinamik untuk Kesan Ellipsis dalam HTML

Pernyataan Masalah

Dalam HTML, amalan biasa ialah memaparkan teks yang panjang dalam ruang terhad menggunakan gaya elipsis. Teknik ini memotong kandungan berlebihan, yang ditunjukkan oleh tiga titik (...). Walau bagaimanapun, ia selalunya wajar untuk memberikan maklumat tambahan apabila elipsis aktif. Penyemak imbas tidak secara semulajadi mencetuskan peristiwa apabila elipsis digunakan.

Penyelesaian

Untuk menangani isu ini dan memaparkan petua alat hanya apabila elipsis diaktifkan, berikut ialah penyelesaian JavaScript yang memanfaatkan jQuery:

<code class="javascript">$('.mightOverflow').bind('mouseenter', function() {
    var $this = $(this);

    if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
        $this.attr('title', $this.text());
    }
});

Dengan menggunakan kod ini, apabila pengguna menuding pada elemen DOM dengan kelas "mightOverflow," skrip menyemak sama ada lebar elemen yang dipaparkan adalah kurang daripada lebar sebenar. Jika ya, dan jika elemen belum mempunyai set atribut tajuk, ia memberikan teks elemen kepada atribut tajuk, dengan berkesan menyediakan petua alat apabila diperlukan.

Pelaksanaan

Untuk melaksanakan ini penyelesaian dalam dokumen HTML anda, cuma tambah blok kod berikut dalam atau bahagian:

<code class="html"><script src="jquery.min.js"></script>
<script>
$('.mightOverflow').bind('mouseenter', function() {
    var $this = $(this);

    if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
        $this.attr('title', $this.text());
    }
});
</script></code>

Pastikan pustaka jQuery dimuatkan (jquery.min.js) sebelum melaksanakan skrip ini. Kemudian, gunakan kelas "mightOverflow" pada elemen HTML yang anda jangkakan elipsis dan kefungsian petua alat.

Penyelesaian ini menyediakan cara yang dinamik dan fleksibel untuk menambah petua alat pada teks terpenggal, meningkatkan pengalaman pengguna dan kebolehaksesan dalam aplikasi web anda.

Atas ialah kandungan terperinci Bagaimana untuk Mengaktifkan Petua Alat Secara Dinamik untuk Kesan Ellipsis dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!