最近遇到了一个需求场景，两行文字末尾要加一个尾部按钮，并且还要加...防止溢出。防溢出这个大家都知道，多行文本那套css代码直接copy上去就行。
height: 50px; /* 要给个固定高 */
overflow: hidden; /* 隐藏溢出的内容 */
display: -webkit-box; /* 使用 flexbox 模拟多行截断 */
-webkit-box-orient: vertical; /* 设置 flexbox 方向为垂直 */
-webkit-line-clamp: 2; /* 限制显示的行数为 2 行 */
text-overflow: ellipsis; /* 添加省略号 */
但是按钮要怎么加呢？如果单纯通过css，肯定实现不了，因为有按钮就事件，css是无法处理js事件的，因此必须要使用js来完成剩下的功能。
这里大家要明确一个点，就是这个按钮是在文本的“尾部”，意思就是它是紧随文本末尾的，而不是换行展示，它应该在文本 ... 的后面。
先不考虑按钮的位置，首先要确定，什么情况下要出现这个按钮？那就是文字出现溢出的时候。JS是可以判断文字溢出的场景的。
// react写法
function judgeTextEdge() {
const descText = descRef?.current;
const clientHeight = descText?.clientHeight || 0;
const scrollHeight = descText?.scrollHeight || 0;
// 存在隐藏文本
setOverflow(clientHeight < scrollHeight);
}
通过上述代码即可判断是否出现了文字的溢出。
按钮的展示条件有了，还差按钮的位置，一般来说，这部分直接通过css就可以处理。
给一个相对于容器的绝对定位，调试到文本的末尾。（常规css代码，这里省略）
但是光这样做其实还会导致一个问题，绝对定位的元素是脱离文档流的，因此它不占用文档的空间，也就是会和正常的文本出现重叠效果。
看起来有点不知所措，如果这步卡住，前面的工作基本白费！
其实很简单，两个样式即可搞定！
z-index: 1; /* 能覆盖掉文本即可 */
background: #fff; /* 和文本底色保持一致 */
这就是css的“障眼法”，把按钮区块覆盖到文本上层，给一个和文本相同的底色，就造成按钮“占位”的假象了。
然后给这个按钮添加事件，就可以满足以上的需求场景了。
