一行显示否则省略号
.line-clamp1 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
两行显示多则显示省略号
.line-clamp2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
下面是直接可以拿来看效果的代码 需要设置宽度的
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>line-clamp</title>
<style>
.shareBox .shareState .item{
width: 291px;
height: 157px;
border: 1px solid #dfdfdf;
padding: 0px 10px 10px;
}
p{
margin: 0px;
margin-top: 10px;
}
p.name{
font-size: 20px;
font-weight: bold;
}
.line-clamp{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
<!--动态渲染数据-->
<div class="shareBox">
<!--分享-->
<div class="shareState">
<div class="item">
<p class="name">面朝大海,春暖花开</p>
<p class="line-clamp">
从明天起,做一个幸福的人 喂马、劈柴,周游世界
从明天起,关心粮食和蔬菜 我有一所房子,面朝大海,春暖花开
从明天起,和每一个亲人通信 告诉他们我的幸福 那幸福的闪电告诉我的
我将告诉每一个人 给每一条河每一座山取一个温暖的名字 陌生人,我也为你祝福 愿你有一个灿烂的前程 愿你有情人终成眷属 愿你在尘世获得幸福
</p>
</div>
</div>
</div>
</div>
</body>
</html>