看到视觉稿上的展开收起的时候我的第一反应是：我去，还挺好实现的。当然这是我不过脑子的想法，当我开始实现的时候发现：哎吆，我去，什么玩意。然后我就开始百度有没有什么好的办法（面向百度开发的前端就是我没错了😂），然后看了一篇css实现的展开收起的文章，真的很厉害，突然我就发现了css的强大之处，但是博主的实现方式和我的场景不是很一样，最后我还是借助了js实现，非常的简单粗暴，说了这么多废话，直接上思路。
思路
因为我们项目的使用场景是一行省略，所以都是按照一行省略来的。
1、文本后面预留展开位置
2、按钮绝对定位在文本后面（给人文字环绕的错觉）
3、点击展开按钮拿到文本高度
4、调整文本宽度和展开按钮的位置
（原谅我的表达不清晰，凑和看吧😂）
实现
html
wrap：整个盒子的容器
text：文本容器
btn：展开收起按钮
<div class="wrap">
<div class="text">
斯为泰山而不骄：当自己处于很高的地位的时候不骄傲，当自己跌落谷底的时候不惊恐。
这句话描写的是一个沉着稳重的人，很多时候打败自己的不是困难，而是自己，所谓泰山
崩于前而面不改色，并不只是说面对巨大的变革，很多时候是训诫自己不要被外界影响自
己的情绪。许多时候，不是跌倒在自己的缺陷上，而是跌倒在自己的优势上，因为缺陷常
常给以提醒，而优势却常常忘乎所以乎所以哈。<em></em>
</div>
<span class="btn">
展开
</span>
</div>
css
<style>
.wrap {
width: 300px;
position: relative;
}
.text {
width: calc(100% - 40px); /*计算宽度，预留出按钮的位置*/
line-height: 22px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.text em { /*防止展开后结尾没有收起按钮的位置 占个位*/
display: inline-block;
width: 40px;
}
.btn {
width: 40px;
height: 22px;
text-align: center;
background: cornflowerblue;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
}
.open .text { /*open相关的就是点击展开后的一系列操作*/
width: 100%;
-webkit-line-clamp: 99; /*不确定文本到底多少行 尽可能设置大一些*/
}
.open .btn { /*动态计算top位置*/
top: calc(100% - 22px);
}
</style>
js
<script>
let btn = document.querySelector('.btn');
let wrap = document.querySelector('.wrap');
btn.onclick = function (e) {
let text = e.target.innerText === '展开' ? '收起' : '展开';
e.target.innerText = text;
if (text === '收起') {
wrap.classList.add('open');
} else {
wrap.classList.remove('open');
}
};
</script>
实现成果
因为技术有限不会做动图，大家凑和看😂
收起.png
展开.png
展开.png
小结
比较简单粗暴的实现方式，欢迎大家批评指教。
另外附上纯css实现展开收起的链接：https://zhuanlan.zhihu.com/p/373359523
