缘起#
本次想分享的主题是多行文本的 "展开收起", 这个需求在平时是一个稀松平常的需求，但是实现起来却需要很多技巧。接下来跟着作者一起去慢慢思考吧～
图 1-1 展开收起文本示意图
解决方案#
浮动#
看到这个按钮的位置，我们大致都能意识到，这并不是简单的布局就能达到的效果，也不是定位就能达到的效果，是必须使用浮动才能达到这种类图文混合的效果.
如果没有显示出按钮则点击这里在网站中打开此示例.
现在我们看到已经成功的让文字和按钮混合到了一起，形成了类似图文混排的结构，接下来要做的就是需要把按钮移动到文本省略号的后面，这一点该怎么实现呢？其实同样有个浮动的元素在按钮旁边，然后使用clear: right;或者clear: both;把按钮右侧的浮动清除掉并把按钮向下移动。那么这个浮动元素怎么来的呢？其实同样简单同样创建一个元素，让这个元素浮动到右侧即可.
如果显示出现问题则点击这里在网站中打开此示例
上面我们是用了一个 div 做了一个浮动元素，实际上更简单的就是直接使用div.main的before元素做一个高度，这样既不需要再去增加一个多余的元素破坏可读性.
在上面的示例中实际上还有一个问题，就是before/div.line的高度在这里书写的时候是硬编码，而在实际应用时应该是灵活编码，我们第一眼看到后就会想到的解决办法就是把height: 88px;更改为height: 100%;, 有思路是好的，但是不妨我们真实试验一下，我们会神奇的发现height: 100%;没有作用，仍然没有高度，存疑🤨, 不太懂这边高度失效问题
2023-07-06 补充:
height: 100%;失效问题请看我的这片文章height: 100%; 失效问题探究
效果已经初步达到了，剩下的只需要我们简单的处理一下展开和收起两种状态样式的处理，最简单不需要什么技巧的方式就是直接写一段Js处理一下，根据点击为div.main增添 / 删除多行省略样式即可，我们这里换另一种处理方式，换一种技巧来处理，不使用Js只使用Html与Css即可达到相同的效果。我们都知道label标签，该标签在搭配<input type="checkbox">就可以达到控制状态的效果，即可选中 / 取消, 并且input还提供有选中状态时的伪类，这下更方便，还有最后一个疑问就是如何改变按钮的文字呢？不知道大家有没有了解content这个 css 属性，这个属性完全可以做到这种效果可以为元素填充内容，这样我们使用Html与Css完全能够达到Js的能做的效果.
如果示例存在问题则点击这里在网站中打开此示例
字体样式#
换一种思路，这个按钮我们不做了，我们直接更改省略号…的字体样式更改为任意我们想要的样式，这涉及到了字体样式，我们采用iconfont进行直接使用自己定义好的字体样式
同时我们需要把展开对应的字符更改为省略号…, Unicode 值为2026, 字符为…
注意不要和...搞混了，不然就会发生一个.对应一个展开图标，这是个令人悲伤的故事。下面这张是个错误示范.
现在展开的按钮可以称之为有了形状，但是却没有其功能，因为目前没办法单靠这种方式做到展开收起，我们还需要增添真正用来控制状态的方式，不过该种方式实现基本同上面所说的label与<input type="checkbox">一致，唯一不同的一点是我们需要手动给label一个宽高将其定位到省略号到位置，也就是容器的右下角即可.
Js 模拟容器#
该想法是在看到vant中有一个文本省略组件, 好奇心驱使之下前往github瞅了瞅源码，茅塞顿开，天啦噜，这操作太👖🌶️!
这里所言的模拟容器是克隆一个和折叠文本容器同样的容器，然后将该容器移动至视口外，不断减少其中的文字数量然后不断检测预定的折叠文本高度与当前容器的高度，这样就能找到合适的字数，最后拼接上省略号和按钮即可达到我们的目标.
结尾#
看过几次这个问题，每次都是按照浮动方案解决这个问题，直至这次才真正的去认真思考其他的方案，虽然不是我想出来的，但是学习别人的优秀思路更是成长的一种方式.
参阅资料:
https://juejin.cn/post/6963904955262435336
https://juejin.cn/post/7214839315855491130
https://github.com/youzan/vant/blob/main/packages/vant/src/text-ellipsis/TextEllipsis.tsx