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:

div.rounded { background - color : #FFF ; height : 123px ; width : 200px ; font - size : 11px ; overflow: hidden; }

div.rounded {
  background-color: #FFF;
  height: 123px;
  width: 200px;
  font-size: 11px;
  overflow: hidden;
}

  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Phasellus vel quam vestibulum orci blandit laoreet.

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

function GetContainerSize() { var container = document.getItemById("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); }

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);
}

For more information on this topic, please refer to the following script following:

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