按钮溢出显示省略号不起作用

Question

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

文字流出框架后隐藏。这对响应式设计造成了问题。

请帮我解决此事，并提前致谢

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>

Answer 1

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。