首先,回顾一下一行文本显示溢出时已省略号形式显示的设置。
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 规范草案中。
这样,多行溢出以省略号形式显示的效果也就实现了。
最后,上一个效果图: