Wie werden Tooltips nur angezeigt, wenn der Text in HTML ellipsenförmig ist?

Tooltips werden nur angezeigt, wenn die Auslassungspunkte aktiviert sind

Wenn in HTML der Text die angegebene Breite überschreitet, wird er mit Auslassungspunkten ("...") abgeschnitten. Dies kann erreicht werden, indem die Textüberlaufeigenschaft auf Auslassungspunkte gesetzt wird. Es fehlt jedoch die Browserunterstützung zum Erkennen, wann Auslassungspunkte angewendet werden.

Benutzerdefinierte Ereignisbehandlung mit JavaScript

Um dieses Verhalten zu simulieren und Tooltips nur dann anzuzeigen, wenn Auslassungspunkte vorhanden sind, gehen Sie wie folgt vor ein JavaScript-Ansatz:

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

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

Dieser Code bindet das MouseEnter-Ereignis an Elemente, die überlaufen können. Es prüft, ob die sichtbare Breite (offsetWidth) des Elements kleiner ist als seine tatsächliche Inhaltsbreite (scrollWidth) und ob es kein Titelattribut hat. Wenn diese Bedingungen erfüllt sind, wird das Titelattribut auf den Textinhalt des Elements gesetzt.

Mit dieser Technik können Sie Tooltips nur anzeigen, wenn die Auslassungspunkte aktiviert sind, ohne auf bestimmte Browserereignisse angewiesen zu sein.

Das obige ist der detaillierte Inhalt vonWie werden Tooltips nur angezeigt, wenn der Text in HTML ellipsenförmig ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!