css做‘展开收起’功能，借鉴大佬思路

2023-12-24 23:57| 来源: 网络整理| 查看: 265

开局一张图

上图所示，多行文本的展开收起是一个很常见的交互效果。

实现这一类布局和交互难点主要一下几点：

位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换当文本不超过指定行数时，不显示“展开收起”按钮

在此之前，单独看这个布局，即便是配合JavaScript也不那么容易做出好看的交互效果。经过各方学习，发现纯CSS也能完美实现。

第一步，"展开收起"按钮多行文本截断

假设有如下的一段html结构

如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。

多行文本超出展示省略号的方式，大家平常也用得蛮多吧，关键代码如下

.more-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

按钮右下角环绕效果展开如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。 .more-btn{ float: left; /*其他装饰样式*/ }

换为右浮动

.more-btn{ float: right; /*其他装饰样式*/ }

再移到右下角

.more-btn{ float: right; margin-top: 50px; /*其他装饰样式*/ }

不难看出，按钮确实到了右下角，但按钮上方空白空间太大了。并不是我们希望的效果。

此时，借鉴伪元素配合多个浮动元素来完成。

.more-text::before { content: ''; float: right; width: 10px; height: 50px; background: red; } .more-btn{ float: right; clear: both; /*其他装饰样式*/ }

如上图，当按钮和伪元素before都浮动，并且按钮clear: both，此时，伪元素before成功将按钮顶到了右下角。让伪元素before的宽度去掉便出现如下效果。

.more-text::before { content: ''; float: right; width: 0; height: 50px; background: red; }

如你所见，按钮环绕效果非~常完美符合预期。

但是before高度是固定的50px，不一定会满足场景所需。还需修改为calc动态计算。

.more-text::before { content: ''; float: right; width: 0; height: calc(100% - 20px); /*100%减去一个按钮的高度即可*/ background: red; }

很可惜，calc并没有达到理想的效果。

为什么呢？打开控制台可以发现，calc计算所得高度为0。怎么会这样呢？原因其实是因为父级元素没有设置高度，calc里面的 100% 便失效了。但问题在于，这里所需要的高度是动态变化的，不可能给父级定下一个固定高度。

至此，我们需要对布局进行修改。利用flex布局。大概的方法就是在 flex 布局的子项中，可以通过百分比来计算变化高度。

修改如下，给.more-text再包裹一层，再设置 display: flex

展开如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。 .more-wrapper{ display: flex; }

这样修改之后，calc的计算高度便能够生效。如下图所示。

至此，按钮右下角环绕效果就基本完成了。配上一个按钮点击事件就大功告成了。

浏览器兼容性处理

上面的实现是最完美的处理方式。但是，在Firefox浏览器却出现了兼容性问题。

哦豁。如此就非常尴尬。祸不单行，Safari浏览器也出现了兼容问题。

经过多番查证，发现是display: -webkit-box;属性存在兼容问题。

问题就在于，如果没有display: -webkit-box;怎么实现多行截断呢？如果在知道行数的情况下设置一个最大高度，理论上也能实现多行截断。由此我们通过行高属性line-height去入手。如果需要设置成 3 行，那就将高度设置成为 line-height * 3。

.more-text { /* display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; */ overflow: hidden; line-height: 1.5; max-height: 4.5em; }

此时呢还缺少省略号...。可以利用伪元素实现。

.more-btn::before{ content: '…'; color: #333; font-size: 14px; position: absolute; left: -10px; transform: translateX(-100%); }

大功告成，接下来加上点击切换即可。

点击切换“展开“ 与 ”收起“。

咱们目标是纯CSS完成。那么CSS状态切换就必不可少了，完全可以用input type = "checkbox"这个特性来完成。

要用到input特性就得对html代码进行一些修改。

展开如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。 #exp:checked + .more-text { -webkit-line-clamp: 999; max-height: none; }