css实现展开收起效果！！

JacksonChen_

已于 2024-03-28 16:53:25 修改

阅读量1.3k

点赞数

文章标签： css 前端

于 2023-10-23 18:52:18 首次发布

本文链接：https://blog.csdn.net/chenyajundd/article/details/133964220

版权

要求：

废话不用多说了直接上要求吧！

三行的时候省略，内容字数是不限的，内容文字是随机的，在内容末尾自动加上省略号，最后面增加展开按钮，并且希望展开和省略号之前有一定的间距。

目前暂时不需要考虑什么时候换行，展开后又怎么操作，现在只需要实现这样一个效果！

如果你现在正在看这篇文章，又恰好有一点空闲时间，你不妨试试怎么实现。

如果你做出来了，那么可以在评论区分享你的效果或者 show me your code！！

思路

为了不影响大家的思路，我把实现代码放到最后面，当然想看代码的可以直接跳到代码那一部分。

先分享一下我的思路吧，一开始看见这个效果的时候，我的内心是这样的。

我心想这不挺简单的，结果。。。还是我太菜了。。。

一开始看到我的首要想法是使用定位，我想着使用定位，定到右下角，完了再给文字背景改成白色，再增加一定的宽度盖住原来的文字不就实现了吗？确实是可以的，但是这样有一定的缺点，就是我们无法精准的盖住之前的文字，可能会有一半的情况比如这样：

文字相同的情况下对比一下正确的实现效果：

相信聪明的童鞋已经看出哪不对劲了，确实使用定位是有一些不精准的，那有的同学会说我再加宽一下正好盖住不就行了，我想说这样的话总有盖不住的时候。

代码实现

那经过上面的实验我们已经知道定位实现不了，那应该怎么办呢？

在现在 flex 如此流行的今天相信大家已经忘记了还有一种布局方式，那就是float。

什么是float？

看完这张图大家应该恍然大悟了吧。

那如果只使用浮动，初级目标已经实现了，我们如何放到第三行右下角呢？

我们知道如果我们同时写了两个浮动元素，并且给他们分别清楚浮动之后的效果是这样的：

这样基本已经实现了，但是我们并不想看到上面的浮动，只想看到展开，这里有两种方法，一种是给浮动的宽度设置为0，另一种是给外层元素添加伪元素，宽度同样为0，这两个效果一致，只不过后者不会在页面中多写一个标签。

//前者      
.open {
        float: right;
        width: 0;
        height: calc(100% - 28px);
        clear: both;
      }   
//后者   
.outerElement::before {
        content: '';
        background-color: yellow;
        float: right;
        height: calc(100% - 28px);
      }

总结

之所以分享这个效果，一是是觉得挺有意思的，二是也是感慨目前随着前端技术的发展，一些新技术慢慢已经取代了老技术，就比如 flex 和 float，我们在工作中可能更多的是使用 flex 进行布局，而慢慢的忽视了 float，而真正需要 float 登场的时候，又想不起来要去使用它了。

源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        height: 100%;
      }
      .outerElement {
        width: 600px;
        height: 100%;
        max-height: 80px;
        overflow: hidden;
        line-height: 1.6;
        position: relative;
        overflow: hidden; /*必须结合的属性,当内容溢出元素框时发生的事情*/
        text-overflow: ellipsis; /*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
        display: -webkit-box; /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
        -webkit-line-clamp: 3; /*用来限制在一个块元素显示的文本的行数。*/
        -webkit-box-orient: vertical; /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
      }
      .outerElement::before {
        content: '';
        background-color: yellow;
        float: right;
        height: calc(100% - 28px);
      }
      .open {
        float: right;
        clear: both;
        margin-left: 7px;
        padding-left: 0;
        font-size: 15px;
        color: #2a3aff;
      }
    </style>
  </head>
  <body>
    <div class="outerElement">
      <div class="open">展开</div>
      对目前的知识星球来说，一个个星球是创作者和用户们的领地，有时候，在地球解决不了的问题，可以抛向星空，或许来自火星或者月亮的人看见了，就解决了。111111
      如果星球和星空能够互补，后续陆续会做上网页版，也会结合知识星球的App进行迭代在星空回答过问题，用户能访问到你的星球。觉得开星球太重，可以先到星空感受感受气氛。
    </div>
  </body>
</html>
<script></script>

JacksonChen_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css实现展开收起效果！！

之所以分享这个效果，一是是觉得挺有意思的，二是也是感慨目前随着前端技术的发展，一些新技术慢慢已经取代了老技术，就比如 flex 和 float，我们在工作中可能更多的是使用 flex 进行布局，而慢慢的忽视了 float，而真正的需要 float 登场的时候，又想不起来要去使用它了。
复制链接

扫一扫