HTML で省略記号がアクティブな場合にのみツールチップを表示するにはどうすればよいですか?

ツールチップ表示の省略記号の有効化の決定

HTML では、コンテンツが要素の指定された幅を超える場合、省略記号 (...) を使用できます。自動的に適用され、切り詰められて 3 つのドットに置き換えられたオーバーフロー テキストとして示されます。この記事では、省略記号がアクティブな場合にのみツールヒントを表示する方法について説明します。

背景

次の HTML スニペットを考えてみましょう:

<code class="html"><p>I have got a span with dynamic data in my page, with ellipsis style.</p>

<pre class="brush:php;toolbar:false">.my-class
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}

<span id="myId" class="my-class"></span>

document.getElementById('myId').innerText = "...";

この例では、「myId」スパン内のコンテンツが動的に更新され、コンテンツが指定された幅をオーバーフローすると省略記号スタイルがアクティブになります。

ツールヒントの追加

この要素にツールヒントを追加するには、「title」属性を利用できます:

<code class="html"><span id="myId" class="my-class" title="Full Content"></span></code>

省略記号付きでのみツールヒントを表示する

ただし、コンテンツが省略記号を有効にするのに十分な長さの場合にのみツールヒントが表示されるようにしたいと考えています。これを実現するには、mouseenter イベント リスナーを要素にバインドし、「title」属性を動的に追加します。

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

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

この JavaScript コードでは、要素のオフセット幅がスクロール幅より小さいかどうかを確認します。 、コンテンツがオーバーフローしていることを示します。 「title」属性がまだ設定されていない場合は、要素の全文をツールヒントとして追加します。これにより、省略記号がアクティブになった場合にのみツールヒントが表示されるようになります。

以上がHTML で省略記号がアクティブな場合にのみツールチップを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。