To determine if the content of an HTML element overflows, you can check the element’s `overflow` property in CSS. If the ‘overflow’ property is set to “hidden” or “auto,” it means the content may overflow. Additionally, you can inspect the element’s dimensions using the `clientWidth`, `clientHeight`, `scrollWidth`, and `scrollHeight` properties in JavaScript. If the content exceeds the client dimensions, it overflows.
In this article, we will see how to determine whether its content is overflowing or not using JavaScript.
Approach:
- Select the element to check for overflow.
- Check its style. overflow property, if it is ‘visible’ then the element is hidden.
- Also, check if its clientWidth is less than scrollWidth or clientHeight is less than scrollHeight then the element is overflowed.
Example 1: Check whether the content of paragraph (<p> element) is overflowed or not.
<!DOCTYPE HTML> <html>
<head>
<title>
How to determine the content of
HTML elements overflow or not
</title>
<style>
#GFG_UP {
font-size: 16px;
font-weight: bold;
border: 1px solid black;
height: 20px;
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP"></p>
<br><br>
<button onclick = "gfg_Run()">
Click here
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
let el_up = document.getElementById("GFG_UP");
let el_down = document.getElementById("GFG_DOWN");
let str = "Click on button to check OverFlow";
el_up.innerHTML = str;
function check(el) {
let curOverf = el.style.overflow;
if ( !curOverf || curOverf === "visible" )
el.style.overflow = "hidden";
let isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverf;
return isOverflowing;
}
function gfg_Run() {
ans = "No Overflow";
if (check(el_up)) {
ans = "Content Overflowed";
}
el_down.innerHTML = ans;
}
</script>
</body>
</html>
|
Output:
Example 2:
This is same as previous , but here the content of paragraph (<p> element) is not overflowed, so the example checks and display the desired output No Overflow.
<!DOCTYPE HTML> <html>
<head>
<title>
How to determine the content of
HTML elements overflow or not
</title>
<style>
#GFG_UP {
font-size: 16px;
font-weight: bold;
border: 1px solid black;
height: 20px;
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP"></p>
<br><br>
<button onclick = "gfg_Run()">
Click here
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
let el_up = document.getElementById("GFG_UP");
let el_down = document.getElementById("GFG_DOWN");
let str = "Click on button to check";
el_up.innerHTML = str;
function check(el) {
let curOverf = el.style.overflow;
if ( !curOverf || curOverf === "visible" )
el.style.overflow = "hidden";
let isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverf;
return isOverflowing;
}
function gfg_Run() {
ans = "No Overflow";
if (check(el_up)) {
ans = "Content Overflowed";
}
el_down.innerHTML = ans;
}
</script>
</body>
</html>
|
Output: