HTML如何判定文本是否溢出（即出现省略号）？

Question

如题，我在SO上也找过这个问题，但是那个问题太老了，最高赞的答案也已经失效，问题在此

对于这个问题很多人的回答是判断ScrollWidth是否大于OuterWidth，但是有时候这两个数值相等也会出现省略号，如下图

对于这种情况该如何解决？

之所以要判定是否溢出主要是因为目前所使用的这套UI组件（Layui：源码在此）就是这么实现的，如果溢出了一点击就会弹出一个浮窗以显示完整内容（如下图），这套组件已在项目中大量使用，替换的话成本较高，所以我就想着能否通过修改判定条件来解决这个问题

Answer 1

stackoverflow上另一个回答https://stackoverflow.com/que...，大概意思就是把元素克隆一份，但不显示出来（visibility:hidden）,比较元素本身和副本的宽度，如果副本的宽度大于元素本身，就是溢出了

Answer 2

这个技术问题确实比较棘手
我想提供另一种思路
从产品和交互的角度来讲

为什么会出现文本溢出的情况？

是否允许出现？

为什么不允许出现文本溢出？

如果不允许的话，可不可以换一种交互来避免这个问题

Answer 3

也遇到这个问题，在火狐下不正常，谷歌或360极速模式正常，有没有解决办法