发布时间:2026-02-04 01:51:46 浏览次数:0
在CSS中,通过使用`text-overflow: ellipsis`属性可以实现多余文字的显示省略号。下面是一个例子,展示了如何使用该属性。
首先,我们需要在HTML中添加一个具有超长文本的元素,以便演示省略号的效果。
```html
Lorem ipsum dolor sit amet
consectetur adipiscing elit. Curabitur tincidunt venenatis purus sit amet efficitur. Nulla facilisi. Proin a nisl vehicula
interdum nunc sed
efficitur est. Suspendisse a lobortis purus. Donec quis ex condimentum
tempor neque at
suscipit lectus. Aliquam vitae mollis risus. Suspendisse eget placerat sem.
```
然后,在CSS中,我们将使用`white-space: nowrap`来阻止文本换行,并使用`overflow: hidden`来隐藏多余的文本。*,我们设置`text-overflow: ellipsis`来显示省略号。
```css
.ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
注意,为了使`text-overflow: ellipsis`属性起作用,父元素的宽度必须有限制,且必须小于文本的实际宽度。