JavaScript でテキスト コンテンツが DIV 要素をオーバーフローしているかどうかを確認するにはどうすればよいですか?

DIV 要素の垂直方向のオーバーフローの検出

DIV 要素の垂直方向のテキスト コンテンツが境界を超えているかどうかを判断することは、インターフェイスの整合性を維持するために不可欠です。このオーバーフローを検出するには、要素のscrollHeight プロパティと clientHeight プロパティを比較することをお勧めします。

実装:

次の HTML および CSS コードを検討してください:

<code class="html"><div id="tempDiv" class="rounded">
  Lorem ipsum dolor sit amet,
  consectetur    adipiscing elit. Phasellus vel quam vestibulum orci blandit laoreet.
</div></code>

<code class="css">div.rounded {
  background-color: #FFF;
  height: 123px;
  width: 200px;
  font-size: 11px;
  overflow: hidden;
}</code>

オーバーフローを検出するには、以下に示す JavaScript コードをページに挿入します。

<code class="javascript">function GetContainerSize() {
  var container = document.getElementById("tempDiv");
  var message = "The width of the contents with padding: " + container.scrollWidth + "px.\n";
  message += "The height of the contents with padding: " + container.scrollHeight + "px.\n";

  alert(message);
}</code>

この関数が実行され、アラートが表示されると、scrollHeight と clientHeight の値を比較すると、テキストが DIV をオーバーフローします。

その他のリソース:

このトピックの詳細については、次の URL を参照してください:
http://help.dottoro .com/ljbixkkn.php

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