I've been following the answers here to determine when text within an element has been truncated by the css text-overflow:ellipsis option (I want to show a toggle tip button). I have an issue in Firefox when using offsetWidth < scrollWidth to determine if the ellipsis is shown. It seems as though Firefox is truncating the text and adding an ellipsis even though the text would fit!
This example is from an Elm app displaying an elm-sortable-table styled with bootstrap4's table class'
This image is showing the table cell and my corresponding console logs for the offsetWidth and scrollWidth properties of the <td> tag in question. As can (hopefully) be seen in the bottom row the text is truncated with an ellipsis but the offsetWidth is greater than the scrollWidth.
This is more clear when I set text-overflow:clip:
The top element does overflow but the bottom element doesn't however both show an ellipsis in the previous example
For contrast I can't get Chrome to show this behavior:
I don't know how to determine if an ellipsis is present or not in Firefox, it only kinda works, any suggestions?
Firefox version: 82.0.2 (64-bit)
The code for this example can be found here
