EN
JavaScript - detect if text overflows element vertically
3 points
In this article, we would like to show you how to detect if text overflows element vertically in JavaScript.
Quick solution:
xxxxxxxxxx1
function isTextOverflowing(element) {2
return (element.clientHeight < element.scrollHeight);3
}4
5
6
// Usage example:7
8
const element = document.querySelector('#element');9
10
if (isTextOverflowing(element)) {11
// ...12
}
In this example, we check if the element's clientHeight value is less than its scrollHeight to determine if the text is overflowing the element vertically.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div.text {7
padding: 5px;8
border: 1px solid red;9
width: 200px; /* <------ limits element width */10
height: 23px; /* <------ limits element height */11
white-space: nowrap; /* <------ prevents text from wrapping */12
overflow: hidden; /* <------ hides content overflowing */13
}14
15
</style>16
</head>17
<body>18
<div id="text-1" class="text">19
Short text20
</div>21
<div id="text-2" class="text">22
1<br />23
2<br />24
3<br />25
</div>26
<script>27
28
function isTextOverflowing(element) {29
return (element.clientWidth < element.scrollWidth || element.clientHeight < element.scrollHeight);30
}31
32
33
// Usage example:34
35
const text1 = document.querySelector('#text-1');36
const text2 = document.querySelector('#text-2');37
38
console.log(isTextOverflowing(text1)); // false39
console.log(isTextOverflowing(text2)); // true40
41
</script>42
</body>43
</html>
