<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div {
display: -webkit-box;
width: 200px;
height: 100px;
padding: 20px 10px;
background-color: aqua;
color: brown;
text-align: center;
vertical-align: middle;
}
p {
display: -webkit-box;
width: 200px;
height: 40px;
background-color: aqua;
color: brown;
text-align: center;
vertical-align: middle;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<body>
<!-- 这里使用一个p标签包裹文字是为了让文字在div中间显示且不应该有的内容隐藏 -->
<div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore repellendus omnis voluptatum enim consectetur provident unde tenetur, delectus est. Soluta ducimus in, cupiditate sunt inventore sapiente quod ipsum ipsam ipsa.</p></div>
</body>
</html>
07-22
149
02-19
227
08-18
182
09-10
549
08-16