在按钮达到分隔宽度后,显示应用程序...。一旦到达需要显示的椭圆。我已经完成了部分工作,但是没有按预期工作。

在文本流出框架后隐藏。这给响应式设计带来了问题。

请帮助我解决此问题,并在此先感谢

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

10-05 20:47
查看更多