html： <div class="goods-details-content">你如安好,便是晴天你如安好,异国他乡</div> css: .goods-details-content { display: flex; color: #4d4d4d; overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; //显示几行 }
2 阴影效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box case-content">
<h1>卡片阴影效果</h1>
</div>
</body>
</html>
.box { display:flex; width: 70%; height: 200px; margin: 50px auto; background-color: #fff; } .box h1 { font-size: 20px; line-height: 200px; text-align: center; } .case-content { -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; -o-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; }