要求：

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

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

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

效果图：

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

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

最开始的思路

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

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

我心想这不挺简单的

结果。。。还是我太菜了。。。

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

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

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

最终的实现

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

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

什么是 float？

float - CSS：层叠样式表 | MDN (mozilla.org)

看完这张图大家应该恍然大悟了吧，我们只需要给元素增加 floa t即可。

css 复制代码

    .open {
        float: right;
        clear: both;
        margin-left: 7px;
        padding-left: 0;
        font-size: 15px;
        color: #2a3aff;
      }

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

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

这样基本已经实现了，但是我们并不想看到上面的浮动，只想看到展开。

这里有两种方法：

一种是给上面的浮动元素的宽度设置为0；

另一种是删掉上面的浮动元素标签，给外层元素添加伪元素，宽度同样为0；

这两个效果一致，只不过后者不会在页面中多写一个标签。

JS 复制代码

//第一种前者      
    .float {
            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，而真正需要 float 登场的时候，又想不起来什么时候要去使用它了。

源码

HTML 复制代码

<!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>

太妙了！！使用CSS实现多行文本的[...展开]效果！

要求：

最开始的思路

最终的实现

写在最后

源码