在按钮达到分隔宽度后,显示应用程序...。一旦到达需要显示的椭圆。我已经完成了部分工作,但是没有按预期工作。
在文本流出框架后隐藏。这给响应式设计带来了问题。
请帮助我解决此问题,并在此先感谢
For your reference check this image
#margin {
width: 57%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 10px;
}
.btn {
border-color: #fff;
background-color: #fdfdfd;
text-align: center;
display: inline;
border-radius: 3px;
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px;
margin: 1px 2px;
padding: 4px 7px;
/* display: inline-block; */
border-top: 1px solid #fff;
}
<div id="margin">
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
<span class="btn">1</span>
</div>
最佳答案
text-overflow: ellipsis
不会隐藏DOM元素,因此即使按钮中包含的文本被隐藏,按钮本身也会显示。如果您想要仅CSS的解决方案,则可以尝试将以下内容添加到CSS中:
#margin {
position:relative;
width: 57%;
overflow: hidden;
white-space: nowrap;
padding: 10px;
}
#margin::after {
content:"...";
position:absolute;
top:0;
bottom:0;
right:0;
padding:10px;
background-color:white;
}
这将添加内部带有省略号和白色背景的元素,以手动覆盖
#margin
的右侧。省略号将始终显示在CSS解决方案中,但是您可以使用少量Javascript或jQuery隐藏和显示它。您可以看到正在运行的jsfiddle here。