Jump to content

Overflow Width


jesh
 Share

Recommended Posts

Let's say, for example, you have the following page:

<html><head><style type="text/css">#test{	width: 300px;	overflow: hidden;	white-space: nowrap;}</style></head><body><div id="test">  this content is designed to overflow the width of this containing div.  this content is designed to overflow the width of this containing div.  this content is designed to overflow the width of this containing div.  this content is designed to overflow the width of this containing div.</div></body></html>

This renders out so that only part of the content is visible in the browser; the rest is clipped off. Everything is peachy.My question is: Does anyone know of any property in the DOM that I can get at with javascript that will tell me A: whether the content actually overflowed or B: how wide the content inside the container would be if it wasn't clipped?I'm having a hard time wording my Google searches this morning and I'm not getting any results.

Link to comment
Share on other sites

Well, it looks like the winner is scrollWidth.Even though there aren't any scrollbars, turns out the browser keeps track of how wide the scroll width would be if there were scrollbars.So, just in case anyone else ever runs into this problem, here's how you can do it:

var element = document.getElementById("test");if(element.offsetWidth >= element.scrollWidth){	// no clipping occurred.}else{	// content overflowed.}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...