javascript - 切换 css 类以显示/ overflow hidden 不会重新显示内容

Question

这个 jsfiddle 应该显示我的问题(或运行附加的片段):https://jsfiddle.net/gx9ohkuv/26/

我正在使用 bootstrap 的徽章类，它具有 display: inline-block 和 white-space: nowrap 属性，以及我自己的 hide-overflow 类来显示/在设置宽度的 div 中 overflow hidden 。

当溢出被隐藏然后再次展开时，它不会重新显示之前隐藏的内容。

有没有一种方法可以解决这个问题而不必执行诸如从 dom 中删除元素之类的操作？

$(document).ready(function() {
  showAll = true;
  $("#toggle").click(function() {
    showAll = !showAll;
    if (showAll) {
      $('#container').removeClass('hide-overflow');
    } else {
      $('#container').addClass('hide-overflow');
    }
  });
});

.badge {
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 100;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  font-family: sans-serif;
}
.badge-secondary {
  color: white;
  background-color: #6c757d;
}
.hide-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle</button>
<br/>
<br/>
<div id="container" style="border: 1px solid red; width: 200px;">
  <span class="badge badge-secondary">span 1001</span>
  <span class="badge badge-secondary">span 1002</span>
  <span class="badge badge-secondary">span 1003</span>
  <span class="badge badge-secondary">span 1004</span>
  <span class="badge badge-secondary">span 1005</span>
  <span class="badge badge-secondary">span 1006</span>
  <span class="badge badge-secondary">span 1007</span>
  <span class="badge badge-secondary">span 1008</span>
  <span class="badge badge-secondary">span 1009</span>
</div>

Answer 1

您在添加类时向元素添加了一些样式，但该元素没有默认值。

在切换类之前添加下一个代码

#container{
    text-overflow: initial;
    word-wrap: initial;
    }

希望这就是您要找的。如果需要，很乐意解释或提供更好的解决方案。

$(document).ready(function() {
  showAll = true;
  $("#toggle").click(function() {
    showAll = !showAll;
    if (showAll) {
      $('#container').removeClass('hide-overflow');
    } else {
      $('#container').addClass('hide-overflow');
    }
  });
});

.badge {
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 100;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  font-family: sans-serif;
}

.badge-secondary {
  color: white;
  background-color: #6c757d;
}

#container {
  text-overflow: initial;
  word-wrap: initial;
}

.hide-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle</button>
<br/>
<br/>
<div id="container" style="border: 1px solid red; width: 200px;">
  <span class="badge badge-secondary">span 1001</span>
  <span class="badge badge-secondary">span 1002</span>
  <span class="badge badge-secondary">span 1003</span>
  <span class="badge badge-secondary">span 1004</span>
  <span class="badge badge-secondary">span 1005</span>
  <span class="badge badge-secondary">span 1006</span>
  <span class="badge badge-secondary">span 1007</span>
  <span class="badge badge-secondary">span 1008</span>
  <span class="badge badge-secondary">span 1009</span>
</div>