我有一个容器,文本可以扩展为两行,高度为40px,字体大小为18px.当我做：
text-overflow: ellipsis; white-space: nowrap;
然后虚线显示正确但它在一行上被切断.当我这样做时：
text-overflow: ellipsis;
然后它正确地显示了2行,但最后没有“……”.我如何实现这一点,以便在第二行正确使用两行和“……”？
解决方法
向容器添加一个span,它将保存文本：
<div class="container"> <span>text...</span> </span>
添加此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.
}
调整容器大小,您将看到省略号仅在必要时显示.
应该适用于所有现代浏览器.
