多行文本的展开收起

看到视觉稿上的展开收起的时候我的第一反应是：我去，还挺好实现的。当然这是我不过脑子的想法，当我开始实现的时候发现：哎吆，我去，什么玩意。然后我就开始百度有没有什么好的办法（面向百度开发的前端就是我没错了），然后看了一篇css实现的展开收起的文章，真的很厉害，突然我就发现了css的强大之处，但是博主的实现方式和我的场景不是很一样，最后我还是借助了js实现，非常的简单粗暴，说了这么多废话，直接上思路。

思路

因为我们项目的使用场景是一行省略，所以都是按照一行省略来的。
1、文本后面预留展开位置
2、按钮绝对定位在文本后面（给人文字环绕的错觉）
3、点击展开按钮拿到文本高度
4、调整文本宽度和展开按钮的位置
（原谅我的表达不清晰，凑和看吧）

实现

html
wrap：整个盒子的容器
text：文本容器
btn：展开收起按钮

   

       斯为泰山而不骄：当自己处于很高的地位的时候不骄傲，当自己跌落谷底的时候不惊恐。
       这句话描写的是一个沉着稳重的人，很多时候打败自己的不是困难，而是自己，所谓泰山
       崩于前而面不改色，并不只是说面对巨大的变革，很多时候是训诫自己不要被外界影响自
       己的情绪。许多时候，不是跌倒在自己的缺陷上，而是跌倒在自己的优势上，因为缺陷常
       常给以提醒，而优势却常常忘乎所以乎所以哈。
    
    
        展开
    
 

css

js

实现成果

因为技术有限不会做动图，大家凑和看

收起.png

展开.png

展开.png

小结

比较简单粗暴的实现方式，欢迎大家批评指教。
另外附上纯css实现展开收起的链接：https://zhuanlan.zhihu.com/p/373359523