css实现两行省略,CSS实现文本溢出省略号显示的功能（两行文本）

实现这个功能需要注意两点：

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;

}

效果图：