JSFiddle - React, Tailwind, and code Playground

HTML

<span id="test">test xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>

CSS

#test {
  display: block;
  width: 180px;
  border: 1px solid red;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 10px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
}

JavaScript

var offset = document.getElementById("test").offsetWidth;
var scroll = document.getElementById("test").scrollWidth;
var isEllipsis = offset < scroll;
console.log(offset + " " + scroll + " " + isEllipsis);