实现这个功能需要注意两点:
1.设置文本框的高度
2.高度为行高的整数倍,显示两行,则高度为行高的2倍
需要用到的代码
display: -webkit-box; / 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示/
-webkit-box-orient: vertical;/ 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式/
-webkit-line-clamp: 2;/ 显示两行 /
overflow: hidden;/ 超出部分隐藏 /
实际操作:
代码:
CSS部分:
.box{
width:300px;
height: 340px;
}
.img{
width: 300px;
height: 300px;
background: #ebebeb;
}
.text{
width: 300px;
height: 40px;
line-height: 20px;
font-size: 14px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
效果图: