css文字超出显示省略号_css 超出省略号

你可以使用 CSS 的文本溢出属性 text-overflow 来实现文字超出显示省略号的效果。具体步骤如下：

1. 设置元素的宽度和高度以限制文字显示的区域；
2. 设置 overflow: hidden，将超出区域的文字隐藏；
3. 设置 white-space: nowrap，防止文字换行；
4. 设置 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;
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

其中，对于多行文本，需要使用 -webkit-line-clamp 属性来指定显示的行数，并且需要配合 -webkit-box-orient: vertical 使用。