EN
JavaScript - check if text-overflow ellipsis is active
3
points
In this article, we would like to show you how to check if text-overflow: ellipsis is active using JavaScript.
Quick solution:
function isEllipsisActive(element) {
if (element.clientWidth < element.scrollWidth) {
var style = element.currentStyle || window.getComputedStyle(element);
return style.textOverflow === 'ellipsis'
}
return false;
}
// Usage example:
const element = document.querySelector('#element');
if (isEllipsisActive(element)) {
// ...
}
Note:
Don't confuse checking if ellipsis is active with checking if text overflows the element.
Practical example
In this example, we detect if text overflows element, if it does we additionally check if the element's text-overflow style property value is set to ellipses.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div.text {
padding: 5px;
width: 200px; /* <------ optional */
border: 1px solid red;
text-overflow: ellipsis; /* <------ required */
white-space: nowrap; /* <------ required */
overflow: hidden; /* <------ required */
}
</style>
</head>
<body>
<div id="element-1" class="text">Very short text here</div>
<div id="element-2" class="text">Very long text here, Very long text here, Very long text here</div>
<script>
function isEllipsisActive(element) {
if (element.clientWidth < element.scrollWidth) {
var style = element.currentStyle || window.getComputedStyle(element);
return style.textOverflow === 'ellipsis'
}
return false;
}
// Usage example:
const element1 = document.querySelector('#element-1');
const element2 = document.querySelector('#element-2');
console.log(isEllipsisActive(element1)); // false
console.log(isEllipsisActive(element2)); // true
</script>
</body>
</html>