拜托,css这样实现多行文本“展开收起” 超酷的好吧

发布网友 发布时间：2024-10-24 03:31

我来回答

共1个回答

热心网友 时间：2024-11-06 15:03

前言

无法言语，我是什么，这样傻傻的我怎么守护你

这次我静静哭了选择放弃，我好想好想把记忆折叠起

可惜，记忆不能像之前那个需求一样自由展开与折叠

需求如下所述：

未展开

展开

未展开

展开

我第一次做这种需求，于是就网上搜索案例，找到一个点赞和评论都挺多的方案。

但发现有些问题，于是我向设计大佬询问，得到了拒绝。

在寻求网友帮助时，一位大佬提供了另一方案。

这个方案与上面介绍的那篇文章的方法差不多，不同点在于利用div高度限制文字显示的行数。

然而，在安卓和ios设备上发现此方案存在问题，ios上限制显示行数时会出现额外半行显示或对齐不一致。

结合两者的优点，我设计了新的方案。

使用input记录当前展开或收起状态，并利用两个label按钮实现不同情况下的文字显示。

关键在于判断文字是否超过2行和7行，通过获取文字实际高度。

回忆从前，我的心总是默默的等候

你曾经说你 想找一个依靠

等了好几天 等你的留言 却发现是空白一片

站在镜子前 是不是我的样子有点丑