ホームページ >ウェブフロントエンド >CSSチュートリアル >テキストが省略記号で切り詰められている場合にのみツールチップを表示するにはどうすればよいですか?

テキストが省略記号で切り詰められている場合にのみツールチップを表示するにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-11-07 11:50:03968ブラウズ

How to Display Tooltips Only When Text is Ellipsis-Truncated?

省略記号で切り詰められたテキストのツールチップの表示

指定された表示領域をオーバーフローする可能性のある動的ページ要素を処理する場合、コンテキストを提供するツールチップを追加しますが不可欠になります。このような場合、省略記号 (...) が切り詰められたコンテンツを示しているように見える場合にのみツールチップを表示することが望ましいです。

次の HTML マークアップを検討してください。

<code class="html"><span id="myId" class="my-class">...</span></code>

有効な CSS スタイルを使用します。幅の広いコンテンツの省略記号:

<code class="css">.my-class {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}</code>

この要素にツールヒントを追加するには、jQuery の 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>

このソリューションを実装すると、コンテンツがオーバーフローして省略記号がアクティブになった場合にのみツールヒントが表示され、貴重なコンテキストが提供されます。不必要なときにインターフェースを煩雑にすることなく、ユーザーに便利です。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。