How to detect overflow in div element?

Question

How can I detect vertical text overflow in a div element?

CSS:

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

HTML:

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

Answer 1

You can easily do that by comparing scrollHeight with clientHeight, try the following:

<script type="text/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); } </script> 

For more information please take a look at: http://help.dottoro.com/ljbixkkn.php

Answer 2

A variation on Chamika's answer is to, in your actual html, have an inner and outer Div. The outer Div would have static height and width and overflow hidden. The inner Div only has the content and will stretch to the content.

You can then compare the height and width of the 2 Divs, without the need to dynamically add anything.

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