1. 介绍
在网页开发中，经常会遇到需要在固定大小的容器中显示多行文本的情况。当文本内容超出容器大小时，常常需要使用省略号（...）来表示文本的溢出。在本文中，将介绍一种使用 CSS 样式实现多行文字溢出时显示省略号的方法。
2. 实现
实现这一效果的关键是利用 CSS 属性 text-overflow 和 overflow。首先，需要将容器的高度固定，使用 overflow: hidden; 来隐藏超出容器高度的内容。然后，使用 text-overflow: ellipsis; 来在文本溢出时显示省略号。最后，还需要设置 white-space: nowrap; 来防止文本换行。
2.1 示例代码
下面是一个示例代码，演示了如何使用 CSS 实现多行文字溢出时显示省略号的效果：
.multiline-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 3em;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
3. 解析
通过上述示例代码，可以看到其中的关键样式是 -webkit-line-clamp 和 -webkit-box-orient。这两个属性是针对 Webkit 内核浏览器的私有属性，用于控制多行文本的展示。
3.1 -webkit-line-clamp
属性 -webkit-line-clamp 可以限制容器中文本的行数。在上述示例中，将此属性设置为 3，表示容器中最多显示三行文本。
3.2 -webkit-box-orient
属性 -webkit-box-orient 用于控制文本的排列方向。将此属性设置为 vertical，表示文本垂直排列。
4. 使用场景
此方法适用于需要在固定大小容器中显示多行文本的场景。常见的应用包括：
新闻列表页
产品描述
评论列表
博客摘要
5. 总结
通过使用 CSS 中的 text-overflow 和 overflow 属性，结合 Webkit 内核浏览器的私有属性 -webkit-line-clamp 和 -webkit-box-orient，可以实现多行文字溢出时显示省略号的效果。在应用中，可以根据实际需要调整容器的高度以及行数。这种方法能够有效解决多行文字溢出问题，提升用户体验。