发布时间:2026-02-04 11:43:42 浏览次数:0
要在CSS中实现超过字数显示省略号的效果,可以使用overflow和text-overflow属性。
首先,设置一个固定的宽度,超过该宽度的文本将被隐藏:
```css
p {
width: 200px;
overflow: hidden;
}
```
然后,添加text-overflow属性来显示省略号:
```css
p {
white-space: nowrap;
text-overflow: ellipsis;
}
```
接下来,为了使超过字数的文本显示省略号,你需要在HTML中包裹文本的容器元素,并将文本放入该容器中:
```html
Lorem ipsum dolor sit amet
consectetur adipiscing elit. Mauris dapibus ornare purus
non ullamcorper enim sollicitudin in.
```
*,应用以上样式,即可实现超过字数显示省略号的效果。
完整的CSS代码如下:
```css
p {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
```