I need to know when my content overflows my div. If it does, I'll be placing in a link to open the page in a new window with all of the content.

Cheers,

DalexL

I need to know when my content overflows my div. If it does, I'll be placing in a link to open the page in a new window with all of the content.

Cheers,

DalexL

• javascript
• html
• css

• This might help: stackoverflow./questions/835684/… – Chris Laplante Commented Jul 23, 2011 at 19:42

4 Answers 4

Using jQuery and Marquee Text When Text Overflows:

$('div').each(function(){
    var $this = $(this);
    if ($this.get(0).scrollHeight > $this.height()) {
        $this.after('<a href="#" target="new">Read More</a>');
    }
});

http://jsfiddle/eF7jf/

none jQuery answer:

if( elements.scrollHeight > element.clientHeight )
  alert('content-overflow')//not to be confused with stackoverflow

If you create a structure like this:

<div id="outer" style="overflow: auto">
  <div id="inner">
    content
  </div>
</div>

then overflow happens when inner's width or height exceeds that of outer since outer assumes the dimensions of the viewport and inner assumes a minimal width and height necessary to display all of content.

You can mark outer as visibility: hidden to cause it to layout but not display.

If content includes position: fixed content then that portion will not be taken into account (and on CSS 2 will not even be clipped).

this a jquery plugin for fit text to width and height:

(function($) {
    $.fn.fitText = function(options) {
        options = $.extend({
            width: 0,
            height: 0
        }, options);

        $(this).each(function() {
            var elem = $(this);
            if (options.height > 0) {
                while (elem.height() > options.height) {
                    elem.text(elem.text().substring(0, (elem.text().length - 4)) + 'YourLink');
                }
            }
            if (options.width > 0) {
                while (elem.width() > options.width) {
                    elem.text(elem.text().substring(0, (elem.text().length - 4)) + 'YourLink');
                }
            }
        });
    }
})(jQuery);