经常逛 CSDN 的朋友会发现如下效果:当代码行数超过指定高度的时候,会有折叠,点击展开按钮后才会展示全部。
这一效果在知乎、百度知道也很常见。
实现
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折叠/展开</title>
<style>
.open-before{
position: relative;
height: 220px;
overflow: hidden;
color: #fff;
background-image: linear-gradient(#333 80%, #eee);
}
.content