这个 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>
最佳答案
您在添加类时向元素添加了一些样式,但该元素没有默认值。
在切换类之前添加下一个代码
#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>
关于javascript - 切换 css 类以显示/ overflow hidden 不会重新显示内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48913025/