How to Determine if Text is Overflowing & Handle Text Ellipses Removing the Overflow

I’m trying to write a function that determines whether the text has overflowed (to determine whether I should show a tooltip). How can I handle text ellipsis removing the overflow?

I have:

const isTextOverflowing = (element) => element.scrollWidth > element.clientWidth;

This works in all cases apart from when the text is truncated with ellipsis and is the same number of characters with and without ellipsis and so the text element’s scrollWidth equals the clientWidth (and incorrectly returns false).

Note: I add ellipsis to overflowing text with this css className:

clampTextInOneLine: {
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    overflow: "hidden",
  },