文本省略号（ellipsis）是一种在 CSS 中常用的效果，用于在页面展示长文本时，当文本内容超出容器宽度时，自动省略多余的内容，并用省略号表示。实现省略号的方法有多种，下面将介绍几种常用的实现方式。
1. 使用text-overflow属性：
text-overflow属性是用来设置文本溢出时的处理方式，可以设置为"ellipsis"来显示省略号。但是在使用text-overflow属性前，还需要设置以下两个属性：
- white-space: nowrap; // 禁止文本换行
- overflow: hidden; // 隐藏溢出的部分
示例代码：
```css
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
2. 使用伪元素：
可以通过创建一个伪元素来实现省略号效果，将省略号添加到文本末尾。这种方法适用于单行文本的情况。
示例代码：
```css
.container {
width: 200px;
position: relative;
overflow: hidden;
}
.container::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background: white;
padding: 0 5px; // 可根据需要调整省略号的样式
}
```
3. 使用JavaScript：
如果需要处理多行文本的省略号效果，可以使用JavaScript来实现。可以使用getComputedStyle函数获取文本宽度，然后根据文本宽度和容器宽度来决定是否显示省略号。
示例代码：
```html
This is a long text...
```
以上是几种常用的实现CSS文字省略号的方式，根据不同的需求可以选择合适的方式实现。
咨询微信客服
0516-6662 4183
立即获取方案或咨询
top
