你可以使用 CSS 的文本溢出属性 text-overflow 来实现文字超出显示省略号的效果。具体步骤如下:
- 设置元素的宽度和高度以限制文字显示的区域;
- 设置 overflow: hidden,将超出区域的文字隐藏;
- 设置 white-space: nowrap,防止文字换行;
- 设置 text-overflow: ellipsis,在超出区域的文字末尾显示省略号。
示例代码如下:
/* 对于单行文本 */
.single-line {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 对于多行文本 */
.multi-line {
width: 200px;
height: 60px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3; /* 显示的行数 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
其中,对于多行文本,需要使用 -webkit-line-clamp 属性来指定显示的行数,并且需要配合 -webkit-box-orient: vertical 使用。