Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <style>
        div {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            border: 1px solid red;
        }
        
        #aDiv {
            width: 100px;
            border: 1px solid blue;
        }
        
        button {
            margin-bottom: 2em;
        }
    </style>
</head>
​
<body>
    <div id="aDiv">
        FooBar-FooBar-FooBar-FooBar
    </div>
    <button id="aButton">
        Check for overflow
    </button>
    
    <div id="anotherDiv">
        FooBar-FooBar-FooBar-FooBar
    </div>
    <button id="anotherButton">
        Check for overflow
    </button>
</body>
</html>
 
var buttonOne = document.getElementById('aButton'),
    buttonTwo = document.getElementById('anotherButton'),
    divOne = document.getElementById('aDiv'),
    divTwo = document.getElementById('anotherDiv');
​
//check to determine if an overflow is happening
function isOverflowing(element) {
    console.log(element.scrollWidth, 'scrollWidth')
    console.log(element.offsetWidth, 'offsetWidth')
    return (element.scrollWidth > element.offsetWidth);
}
​
function alertOverflow(element) {
    if (isOverflowing(element)) {
        console.log('Contents are overflowing the container.');
    } else {
        console.log('No overflows!');
    }
}
​
buttonOne.addEventListener('click', function() {
    alertOverflow(divOne);
});
​
buttonTwo.addEventListener('click', function() {
    alertOverflow(divTwo);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers