jesh Posted April 12, 2007 Share Posted April 12, 2007 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 More sharing options...
jesh Posted April 13, 2007 Author Share Posted April 13, 2007 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now