HTML 要素内のコンテンツ オーバーフローを検出するにはどうすればよいですか?

HTML 要素内のコンテンツ オーバーフローの検出

要素内のコンテンツが指定されたサイズを超えている状況では、要素内のコンテンツが指定されたサイズを超えているかどうかを判断することが重要になります。要素が溢れています。これは、コンテンツがオーバーフローした場合に追加のボタンを表示するなどの機能を実装する場合に特に役立ちます。

提供されている関数 isOverflown(element) は、このタスクに対する簡単なアプローチを提供します。要素のscrollHeightとscrollWidthをそのclientHeightとclientWidthに対して評価します。これらの値のいずれかが対応する値を超える場合、要素がオーバーフローしていることを示します。

function isOverflown(element) {
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

この機能は、次のようなさまざまなアプリケーションで利用できます。

1. 要素サイズの自動調整コンテンツの長さに基づきます。
2. オーバーフロー インジケーターの表示 (例: スクロールバーや
3. コンテンツが切り詰められた場合に追加のコンテキストを提供することで、ユーザー エクスペリエンスを向上させます。

次のコード サンプルは、isOverflown 関数の使用方法を示しています。

var els = document.getElementsByClassName('demos');
for (var i = 0; i < els.length; i++) {
  var el = els[i];
  el.style.borderColor = (isOverflown(el) ? 'red' : 'green');
  console.log("Element #" + i + " is " + (isOverflown(el) ? '' : 'not ') + "overflown.");
}

CSS を使用して、デモンストレーション用の要素のスタイルを設定できます目的:

.demos {
  white-space: nowrap;
  overflow: hidden;
  width: 120px;
  border: 3px solid black;
}

HTML:

<div class='demos'>This is some text inside the div which we are testing</div>
<div class='demos'>This is text.</div>

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