[前端业务逻辑] 文本超长截断时显示省略号，并提供Tooltip 以便用户可以看到完整内容

前言

文本超长截断时显示省略号，并提供鼠标悬停才会显示的Tooltip 来展示完整内容，这种实现可以大大节省页面空间，进而怎加布局的灵活性，在实际项目开发中应该还是有很多应用场景的。

此次实验源于之前对Fluent UI 的TooltipHost 组件的好奇，该组件实现了文本溢出时才会出现Tooltip 的逻辑，测试了几次后，确认了之前的猜想，整体来说——简单而巧妙，如果有其他实现方式，或者描述有误，欢迎评论区讨论。

实现方式

首先父元素设置CSS实现当子元素文本超长时截断并替换被截断字符串为省略号，标准三连：

.container{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

然后子元素设置为任意行内元素（inline），受到white-space 的影响，行内元素的文本强制不换行，其宽度会随文本长度无限增加，不再受父容器宽度的影响，此时由于父、子元素宽度的不一致，我们就可以计算出文本是否溢出了。

在宽度计算时，需要注意Element.clientWidth，Element.offsetWidth，Element.scrollWidth 的区别，根据Web Api 规范中的定义，inline 元素的clientWidth 属性恒为0，而scrollWidth 宽度计算方式与clientWidth 一致（也是0），所以计算行内元素的宽度只能使用offsetWidth，而计算父元素宽度时，