这篇博客介绍了如何通过CSS实现文本超出容器时显示省略号的效果。通过设置.container的overflow为hidden，position为relative，背景颜色等属性，然后利用伪元素:after创建省略号，并通过定位和内容属性完成布局。这种方法适用于现代浏览器，可以在调整容器大小时动态显示省略号。
向容器添加一个span,它将保存文本：
text...
添加此CSS：
.container {
overflow: hidden;
position: relative;
background: white; //or other color
}
.container:after {
content: '...'; //the ellipsis
position: absolute; //positioned in bottom-right
bottom: 0; //...
right: 0; //...
padding: 0 0.3em; //give some separation from text
background: inherit; //same color as container
}
.container span:after {
content: '\0000a0'; //a space
position: absolute; //to cover up ellipsis if needed
width: 1000px; //...
z-index: 1; //...
background: white; //must match container's color. can't use inherit here.
}
调整容器大小,您将看到省略号仅在必要时显示.
应该适用于所有现代浏览器.
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
