一行文本和多行文本显示溢出时，以省略号显示

首先，回顾一下一行文本显示溢出时已省略号形式显示的设置。
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