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

DDD
Lepaskan: 2024-11-05 19:41:02
asal
847 orang telah melayarinya

How to Dynamically Activate Tooltips for Ellipsis Effects in 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());
    }
});
Salin selepas log masuk

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

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!

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