背景
公司业务需要做一个详情页，里面有某段文字需要有展开/收起按钮，展开前限制4行，按钮需要在文本右下角，作为文本中的一部分，展开前文本有省略号。
相关环境、技术与库
Taro 3.6.5
React 18
微信小程序
tailwind css
实现思路
- 使用state维护展开/收起状态，点击按钮切换状态；
- 使用overflow: hidden和text-overflow: ellipsis实现文本溢出时自动加省略号的功能；
- 根据state的展开/收起状态，判断是否需要给文本添加下列样式，实现对行数的控制；
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
- 将按钮的DOM放置在文本的前面，同级，添加float: right使其浮动到容器最右侧，现在按钮位于文本的右上角，且嵌入了文本当中；
- 使用CSS的::before或创建一个和按钮同级的空span标签(或display: inline的View)，设置其宽度为0，高度为除去最后一行的剩余文本的高度，此时，按钮将会被顶到文本的最后一行，位于右下角。
问题
在微信开发者工具的模拟器上，以及安卓手机上，都没有出现任何问题，省略号的位置，展示效果都完美还原了UI设计稿，但是有同事反映在iOS设备上出现了样式错误的问题，展开前所有的文本都不显示，展开后正常。
问题排查
由于代码逻辑没有问题，因此初步定位在CSS上。一开始以为是float导致的问题，毕竟float在日常开发中使用相对较少，可能有一些比较小众的问题，经过全网搜索也没有人遇到过相关问题。
随后注意到，同样是使用了float，展开后按钮和文本的显示完全正常，展开前不正常，而展开前后的差别在于line-clamp的使用，经过排查，最终断定为iOS微信小程序中，使用了line-clamp的容器内部不能包含使用了float的内容，否则将会导致显示错误。
解决方案
使用容器的max-height替代line-clamp，其他不变，基本能做到还原，但是省略号不能显示。且一旦行高不便于计算（比如产品要求使用富文本，这片文字的样式都不能事先确定），max-height的取值就不太好确定了。
