纯css实现网页内容的隐藏和点击后下拉查看

纯css实现网页内容的隐藏和点击后下拉查看

在我们进行网页开发的时候经常会有这样的需求，我们一段文本内容可能会比较冗长，为了提升用户体验，我们必须考虑到并非所有用户都喜欢，都需要去查看所有文本内内容，但毕竟内容又是必须的，不能舍弃，于是我们可以完成一个功能，并将部分内容隐藏，然后用户点击“查看更多”后，我们便将隐藏的内容展示给用户看，这样子不仅不会让不需要的用户感到内容冗长，同时也满足了去他用户对该类内容的需求。
首先，用P标签写一段文字在网页中：

然后按照上述思路，我们首先要做的就是设置p标签的宽高，为了便于区分，给P标签一个背景颜色是可以blue，然后就可以清楚地看到我们的元素内容是超出了P标签的区域的。

之所以超出部分仍然会显示在网页中，是因为P标签的属性overflow属性的属性值默认为visible，即产出部分仍然显示。因此我们设置overflow属性值为hidden（超出部分隐藏）后，即可实现第一步，产出部分隐藏，
实现代码：

p{
    margin: auto;
    line-height: 1.5;
    width: 500px;
    height: 300px;
    background-color: skyblue;
    overflow: hidden;   
}

实现后效果：我们看到超出部分已经不再显示在网页中了。

接下来就是实现该效果的核心过程，具体实现思路是利用input标签多选框的有选中和未被选中两种状态的特点，当input被选中时我们可以将P标签的高度设置为自动，这样的P标签的高度就会被内容撑开不至于被固定高度约束，隐藏的内容就会展示在页面中，不被选中时设置一个固定高度将超出的内容隐藏。这样就实现以下效果：
未被选中时，下图所示，超出部分仍然隐藏：

当input被选中时，下图所示，剩下的内容会展示出来：

目前为止实现代码（HTML）：

**CSS代码如下：

    width: 600px;
    margin: auto;
}
p{
    margin: auto;
    line-height: 1.5;
    width: 500px;
    height: 300px;
    background-color: skyblue;
    overflow: hidden;   
}
/*下面这句代码的含义：当input被checked（选中）的时候，
它的兄弟元素P的高度变为自动*/
input:checked+p{
    height: auto;
}**

``当然这样子虽然功能可以实现，但并不美观，而且并不能让用户很快意识到点击选中就可以实现相关功能，因此还需要进行以下优化
利用label标签可关联的特性，可以将提示语句“点此查看更多”和input关联起来：
如图所示，当我们点击文字“点此查看更多时”，input标签会被选中，隐藏的内容也会随此展开，再次点击，input重新变回未选中状态，超出内容再次隐藏。

接下来要做的就是最后的优化和升级，首先将input标签的display属性设为none；这样子多选框就不会占用页面的空间影响美观。然后根据自己的需求改变下一下提示信息“点此查看更多”的样式，这里就根据自己需求来，不再过多赘述。

当然还有一点比较重要：用户再点击“点击查看更多后”需要收回继续隐藏，如果我们不做任何改变，页面仍然会继续显示“点此查看更多”，而用户目前需求是点此隐藏，因此这显然是不合理的，所以我们应该想办法，当用户点击“点此查看更多”后，提示信息变为“点此收起多余内容”。
实现思路：input被选中后，它的同级元素label里面的span标签消失（display:none;），然后重新为label添加伪元素::before,伪元素content属性值可以填上我们需要提示的信息，比如“点此收起多余内容”；这样子即可实现我们的需求：

整个功能实现代码（css）：

section{
    width: 600px;
    margin: auto;
}
p{
    margin: auto;
    line-height: 1.5;
    width: 500px;
    height: 300px;
    background-color: skyblue;
    overflow: hidden;   
}
input:checked+p{
    height: auto;
}
input{
    display: none;
}
label,span{
    display: flex;
    justify-content: center;
}
input:checked~label>span{
    display: none;
}
input:checked~label::before{
    display: inline-block;
    content: "点此收起多余内容";
    border-radius: 20px;
    width: 250px;
    text-align: center;
    background-color: greenyellow;

}
span{
    border-radius: 20px;
        width: 200px;
        background-color: greenyellow;
}

结束语：当然，这里只是讲述了实现过程，并未完全站在审美角度上去实现，各位可以根据自己的需求添加样式，实现自己要求的效果。