JavaScript を使用して CSS テキストのオーバーフローを検出するにはどうすればよいですか?

省略記号によるテキスト オーバーフローの検出

CSS の text-overflow プロパティを使用すると、テキストがコンテナの幅を超える場合にテキストを切り詰めることができます。テキストが切り取られていることを示す省略記号 (...) が表示されます。

オーバーフロー検出

Web ページ上のどの要素でテキストが切り詰められているかを検出するにはJavaScript を使用できます:

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

この関数は要素を入力として受け取り、その幅が以下の場合に true を返します。スクロール幅。テキストがオーバーフローしていることを示します。

使用例

この関数を使用すると、次のような要素のオーバーフロー ステータスを確認できます。

<div>
  <span>Normal text</span>
</div>
<div>
  <span>Long text that will be trimmed text</span>
</div>

console.log(isEllipsisActive(document.querySelector('span'))); // false (for the first div)
console.log(isEllipsisActive(document.querySelectorAll('span')[1])); // true (for the second div)

この JavaScript 関数を使用すると、テキストが溢れている要素を動的に検出し、適切なスタイルや動作を適用できます。それに応じて。

以上がJavaScript を使用して CSS テキストのオーバーフローを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。