Bagaimana untuk Memaparkan Petua Alat Hanya Apabila Teks Dielipsize dalam HTML?

Memaparkan Petua Alat Hanya Apabila Ellipsis Diaktifkan

Dalam HTML, apabila teks melebihi lebar yang ditentukan, ia akan dipotong dengan elipsis ("..."). Ini boleh dicapai menggunakan sifat limpahan teks yang ditetapkan kepada elipsis. Walau bagaimanapun, ia tidak mempunyai sokongan penyemak imbas untuk mengesan apabila elipsis digunakan.

Pengendalian Acara Tersuai dengan JavaScript

Untuk mensimulasikan tingkah laku ini dan memaparkan petua alat hanya apabila elipsis hadir, berikut ialah pendekatan JavaScript:

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

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

Kod ini mengikat acara tetikus pada elemen yang mungkin melimpah. Ia menyemak sama ada lebar kelihatan elemen (offsetWidth) kurang daripada lebar kandungan sebenar (scrollWidth) dan jika ia tidak mempunyai atribut tajuk. Jika syarat ini dipenuhi, ia menetapkan atribut tajuk kepada kandungan teks elemen.

Teknik ini membenarkan anda memaparkan petua alat hanya apabila elipsis diaktifkan tanpa bergantung pada peristiwa penyemak imbas tertentu.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Petua Alat Hanya Apabila Teks Dielipsize dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!