在html文字展开更多,不用 JS 显示“更多”的按钮来展开更多内容

原标题：不用 JS 显示“更多”的按钮来展开更多内容

一个div设置了overflow:hidden，里面的内容不定的，我想在内容被修剪的时候显示出一个按钮用于展开，这种效果css能做到吗？

这是来自一个群里的问题，当时我还在动车上，拿着手机看到了这个问题后，脑中出现的第一个想法是这样的：

用手机中的备忘录画了一个草稿，然后简单描述了自己的想法。设置一个空的标签用来覆盖“更多”这个按钮，而这个空的标签会被文字内容顶下来，直到文字的“更多”的出现。

不过当时群里人太多了，或者我的想法也稍微有点天真吧，毕竟我自己也没证实过，只是一个很突兀的临时想法。后来话题就变成怎么用 CSS 和 HTML 来实现更多的切换，这个之前我也写过一个类似的《纯 CSS 方式实现内容区域的更多展示效果》。

周末的两天时间要么去找朋友玩，要么就是摊在沙发上玩游戏看电影了，电脑也没开。昨晚做了一个简单的 demo 之后，粗略的实现了一下效果，但也不知道是不是最终的效果了。不过无所谓，既然自己做了这个 demo，那么就干脆利用一点空余时间再完善一下，以及记录一下吧。

demo：http://lab.tianyizone.com/demo/show-more-btn.html

设想

最初的设想在前面用草图画了，简单来说，就是把“更多”这个按钮通过 position: absolute; bottom: 0; 定位在模块的底部，然后再通过一个空的元素覆盖在这个“更多”按钮之上，接着就是通过内容区域的增加，一直把空的元素推出固定高度的部分。

当空的元素被推出去之后，“更多”按钮也就显示出来了。

不过这里的“更多”目前设置的是 bottom:0; right:0;，如果这个时候再加上一个 left: 0; 的话，那么就会占据底下的一行，具体就看需求是怎么样的了。

一些说明

在使用这个方式来实现的时候，需要注意的是：

行高，以免文字覆盖不全；

“更多”的宽度，以免覆盖不全；

简单来说，就是要通过背景色的覆盖实现，那么就要注意元素的宽度和高度的利用，避免“走光”。

录制一个简单的效果

代码部分

首先是 HTML 部分的代码：

更多... 这里就是文字内容部分