<!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>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.root{
width: 350px;
padding: 10px;
background-color: #eee;
display: flex;
flex-wrap: wrap;
}
.box{
width: 350px;
/* height: 100px; */
background-color: rgb(245,222,179);
margin: 5px 0;
padding: 10px;
border-radius: 10px;
}
.box>h3,p{
margin: 10px 0;
}
.box>p{
text-overflow: ellipsis;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.box>button{
margin-right: 10px;
padding: 5px 10px;
border-radius: 5px;
border: none;
background-color: rgb(255,69,0);
float: right;
}
</style>
<body>
<div class="root">
<div class="box">
<h3>1.什么是区块链?</h3>
<p>区块链大大大大撒大撒的娃啊大大实打实的都是大大大多是从封建经济发娃啊大大实打实的都是大大大多是从封建经济发娃啊大大实打实的都是大大大多是从封建经济发</p>
<span>2020-09-02</span>
<button>展开</button>
</div>
<div class="box">
<h3>2.什么是物联网?</h3>
<p>物联网大大大大撒大撒的娃啊大大娃啊大大实打实的都是大大大多是从封建经济发娃啊大大实打实的都是大大大多是从封建经济发实打实的都是大大大多是从封建经济发</p>
<span>2020-09-02</span>
<button>展开</button>
</div>
<div class="box">
<h3>3.什么是人工智能?</h3>
<p>人工智能大大大大撒大撒的娃啊大大娃啊大大实打实的都是大大大多是从封建经济发娃啊大大实打实的都是大大大多是从封建经济发实打实的都是大大大多是从封建经济发</p>
<span>2020-09-02</span>
<button>展开</button>
</div>
</div>
</body>
<script>
var button=document.querySelectorAll('button')
for(let i=0;i<button.length;i++){
button[i].onclick=function(){
let box=this.parentNode
if(this.innerHTML=='展开'){
let p=box.querySelector('p')
p.style.display="table"
this.innerHTML="收起"
}else if(this.innerHTML=='收起'){
let p=box.querySelector('p')
p.style.display="-webkit-box"
this.innerHTML="展开"
}
}
}
</script>
</html>
效果图