Javascript 切换css类以显示/隐藏溢出不会重新显示内容

此JSFIDLE应该显示我的问题（或运行附加的代码段）：

我使用的是bootstrap的badge类，它具有

display:inline block

和

white space:nowrap

属性，以及我自己的hide overflow类以设置的宽度显示/隐藏div中的溢出

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

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

$（文档）.ready（函数（）{
showAll=true；
$（“#切换”）。单击（函数（）{
showAll=！showAll；
if（showAll）{
$（“#容器”）.removeClass（'hide-overflow'）；
}否则{
$（'#container'）.addClass（'hide-overflow'）；
}
});
});
.badge{
显示：内联块；
填充物：25em.4em；
字体大小：75%；
字号：100；
线高：1；
文本对齐：居中；
空白：nowrap；
垂直对齐：基线；
边界半径：.25rem；
字体系列：无衬线；
}
.徽章中学{
颜色：白色；
背景色：#6c757d；
}
.隐藏溢出{
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}

切换




跨度1001
跨度1002
跨度1003
跨度1004
跨度1005
跨度1006
跨度1007
跨度1008
跨度1009
在添加类时，您正在向元素添加一些样式，但该元素没有默认值

在toggle类之前添加下一个代码

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

希望这就是你想要的。如果需要，乐意解释或帮助提供更好的解决方案


$（文档）.ready（函数（）{
showAll=true；
$（“#切换”）。单击（函数（）{
showAll=！showAll；
if（showAll）{
$（“#容器”）.removeClass（'hide-overflow'）；
}否则{
$（'#container'）.addClass（'hide-overflow'）；
}
});
});
.badge{
显示：内联块；
填充物：25em.4em；
字体大小：75%；
字号：100；
线高：1；
文本对齐：居中；
空白：nowrap；
垂直对齐：基线；
边界半径：.25rem；
字体系列：无衬线；
}
.徽章中学{
颜色：白色；
背景色：#6c757d；
}
#容器{
文本溢出：首字母；
单词包装：首字母；
}
.隐藏溢出{
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}

切换




跨度1001
跨度1002
跨度1003
跨度1004
跨度1005
跨度1006
跨度1007
跨度1008
跨度1009
魔鬼代言人。为什么不直接使用
toggleClass（'hide-overflow'）
选项呢？