CSS如何实现文章展开阅读全文的效果？

很多网站都有这样的功能？

我也不知道为什么需要这个功能，展开阅读。先是只能见一部分。

如果说要收费的，那可以理解，展开阅读需要收费，但是仅是css实现这种隐藏，没用，直接修改一个样式即可看到全部内容，所以展开全文收费，不是。

如果说为了方便用户快速滚动到底部评论而损失一次点击交互，那也是没必要的，可以在侧边做一个滚动到评论区的即可，比如阳光沙滩这样

点击评论，然后就滚动到评论区域啦。

所以，也没必要让用户马上滚动到评论区，再说了，没有看文章就评论，这是啥玩意呢？

那有那些是可取的呢？

比如说今天 我就用到了，我用来干什么呢？我希望点击阅读全文的时候跳转到阳光沙滩这里来。 那还有什么用处呢？

我能想到的就是提示用户登录啦，如果你想阅读全文，那么希望你注册，登录一下。

这个渲染的时候可以根据用户登录情况来渲染，如果已经登录了，默认展开全文。这样子或许可以增加网站的注册数量。

效果

实现思路

• 限制内容高度
• 展开阅读的字样父容器绝对布局，于内容的底部
• 文字于父容器的底部
• 文字父容器高度大一点，设置背景为线性渐变，从白色到透明。

这样子基本就可以实现了。

如果有相关的动作，给文字设置链接，或者设置点击事件，实现相关的功能即可。

代码

background: linear-gradient(rgba(255, 255, 255, .0), rgba(255, 255, 255, 1));

背景渐变

  .content-box {
    position: relative;
  }

  .read-origin a {
    color: #0084ff;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    padding-top: 30px;
  }

  .read-origin {
    background: linear-gradient(rgba(255, 255, 255, .0), rgba(255, 255, 255, 1));
    text-align: center;
    width: 815px;
    height: 400px;
    position: absolute;
    bottom: 0;
  }

写法不唯一，但是按前面的思想来即可时下这样的功能。