[前端业务逻辑] 文本超长截断时显示省略号，并提供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，而计算父元素宽度时，scrollWidth 在Chrome 和Firefox，IE 中计算方式也不一致，所以考虑到兼容性，计算父元素宽度最好使用clientWidth/offsetWidth.
注意，获取元素的宽度，会使浏览器强制回流（Reflow），频繁的回流可能引入性能问题，为避免性能问题，可以考虑将父元素的position 设置成absolute，在新的图层中即使回流，也可以将其影响减少到最小。
MDN 上对三种Width 属性的解释：
效果测试
写了一个测试的小Demo，比较简单，不再赘述，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
background-color: orange;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<input id="test-input" type="text" />
<button onclick="editText()">Confirm</button>
</div>
<div class="container">
<div id="test-container">
<span id="test-inline">This is a test msg</span>
</div>
</div>
<script>
function editText() {
const value = document.getElementById("test-input").value;
document.getElementById("test-inline").innerText = value;
renderTooltip();
}
function renderTooltip() {
const container = document.getElementById("test-container");
const inline = document.getElementById("test-inline");
console.log("inlineWidth =", inline.offsetWidth, "\ncontainerWidth =", container.clientWidth);
if (inline.offsetWidth > container.clientWidth) {
container.setAttribute("title", inline.innerText);
} else {
container.removeAttribute("title");
}
}
</script>
</body>
</html>