首先，回顾一下一行文本显示溢出时已省略号形式显示的设置。
HTML代码
<p>两只黄鹂鸣翠柳，一行白鹭上青天</p>
CSS代码
p {
width: 100px;
height: 20px;
overflow: hidden;
white-space: nowrap;/*不换行*/
text-overflow: ellipsis;
/*规定段落中的文本不进行换行，必须设置才实现效果*/
}
这样效果就实现了。
下面是多行显示：
HTML代码
<div class="box">
君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。
</div>
CSS代码
div {
width:150px;
overflow : hidden;
text-overflow: ellipsis;
/* 弹性盒子*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 3;
/*属性规定框的子元素应该被水平或垂直排列*/
-webkit-box-orient: vertical;
}
其中，-webkit-line-clamp 是一个 不规范的属性（[unsupported WebKit property]它没有出现在 CSS 规范草案中。
这样，多行溢出以省略号形式显示的效果也就实现了。
最后，上一个效果图：
溢出.PNG
