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

Detecting Vertical Overflow in a DIV Element

Determining whether a DIV element's vertical text content exceeds its boundaries can be essential for maintaining interface integrity. To detect this overflow, a comparison between an element's scrollHeight and clientHeight properties is recommended.

Implementation:

Consider the following HTML and CSS code:

<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>

To detect overflow, insert the JavaScript code provided below into the page:

<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>

When this function is executed and an alert appears, comparing the scrollHeight and clientHeight values will indicate whether the text overflows the DIV.

Further Resources:

For additional information on this topic, please refer to the following URL:
http://help.dottoro.com/ljbixkkn.php

The above is the detailed content of How can I determine if text content overflows a DIV element in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!