JSFiddle - React, Tailwind, and code Playground

HTML

<div id=foo>this is a very long text that will be truncated</div>

CSS

#foo {
    border: 1px solid #000;
    width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

JavaScript

var foo = document.querySelector('#foo');
if(foo.scrollWidth > foo.offsetWidth){
     console.log("text is overflowing");   
}else{
     console.log("text is not overflowing");   
}