ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript でテキスト コンテンツが DIV 要素をオーバーフローしているかどうかを確認するにはどうすればよいですか?

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

Susan Sarandon
リリース: 2024-10-26 10:36:03
オリジナル
620 人が閲覧しました

How can I determine if text content overflows a DIV element in JavaScript?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート