HTML でテキストが省略されている場合にのみツールチップを表示する方法

省略記号がアクティブな場合のみツールヒントを表示する

HTML では、テキストが指定された幅を超えると、省略記号 ("...") で切り詰められます。これは、text-overflow プロパティを省略記号に設定することで実現できます。ただし、省略記号が適用されるタイミングを検出するためのブラウザのサポートがありません。

JavaScript を使用したカスタム イベント処理

この動作をシミュレートし、省略記号が存在する場合にのみツールチップを表示するには、次のようにします。 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>

このコードは、mouseenter イベントをオーバーフローする可能性のある要素にバインドします。要素の表示幅 (offsetWidth) が実際のコンテンツの幅 (scrollWidth) より小さいかどうか、および要素に title 属性がないかどうかをチェックします。これらの条件が満たされる場合、要素のテキスト コンテンツに title 属性が設定されます。

この手法を使用すると、特定のブラウザ イベントに依存せずに、省略記号がアクティブになった場合にのみツールヒントを表示できます。

以上がHTML でテキストが省略されている場合にのみツールチップを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。