How to Detect Vertical Text Overflow in a DIV Element using JavaScript?

Overflow Detection in DIV Elements

In this article, we delve into the question of how to determine vertical text overflow within a DIV element.

CSS and HTML Setup

Consider the following CSS and HTML code:

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

Detecting Overflow

To ascertain whether the DIV element's text has overflowed, JavaScript can be employed. The following script compares the element's scrollHeight with its clientHeight:

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

By running this script, you can obtain the dimensions of the DIV's content, including any overflow.

Additional Resources

For further information on this topic, refer to the following:

• [Overflow Documentation](http://help.dottoro.com/ljbixkkn.php)

The above is the detailed content of How to Detect Vertical Text Overflow in a DIV Element using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!