テキストがオーバーフローして省略記号が表示されていますか?

テキストのオーバーフローと省略記号がアクティブかどうかを検出する方法

オーバーフローしたテキストは切り詰められ、省略記号 (...) で表示されます。ホワイトスペース、オーバーフロー、テキストオーバーフローなどの CSS プロパティ。ただし、特定のシナリオでは、どの要素のコンテンツがオーバーフローしているかを検出する必要がある場合があります。

これを実現するには、以下のような JavaScript 関数を使用できます。

function isEllipsisActive(e) {
  return (e.offsetWidth < e.scrollWidth);
}

この関数は次の関数を受け入れます。要素（通常はテキストを含むspan要素）を引数として使用します。要素の offsetWidth (要素の表示幅) と、scrollWidth (要素のコンテンツの合計幅) を比較します。 offsetWidth がscrollWidth より小さい場合は、コンテンツが切り詰められており、省略記号がアクティブであることを意味します。

関数を使用するには、span 要素を引数として渡し、戻り値を確認します。 true 値は要素のテキストがオーバーフローしていることを示し、false 値は通常のテキスト表示を示します。

以上がテキストがオーバーフローして省略記号が表示されていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。