如何根据容器大小动态隐藏多个元素，使其不自动换行?
让我用一些截图来解释:
非包装标签
包装标签
我有一个不可预测的标签数量随机大小，基本上我想添加一个d-none类到所有最新的元素，直到容器没有包装。最后一个元素是显示/隐藏隐藏元素的切换按钮。第二个截图显示了我想要避免的东西，容器不能换行，它必须总是在一行上。
这是一个React项目，我尝试了很多事情，比如使用useRef来获取每个标签的大小，但我不能只隐藏最新的元素。
下面是一个示例代码:
<div class="row">
<div class="col">
<span class="badge bg-white">zetze</span>
<span class="badge bg-white">fsdfdsfsd</span>
<span class="badge bg-white">fdsfdsfsd</span>
<span class="badge bg-white">gfgfgdfgdf</span>
<span class="badge bg-white d-none">gfdgdfn</span>
<span class="badge bg-white d-none">rtetret</span>
<button type="button" class="btn show-more"><i class="fe fe-plus"></i></button>
</div>
</div>用上面的代码来解释它，我希望我的div.col元素永远不会在第二行换行，并将d-none类(隐藏它们)添加到除了按钮以外的所有子元素。
你知道如何做到这一点吗?如有任何线索，我们将不胜感激。
好吧，没有办法做CSS依赖于一个跨度的范围在当前浏览器(我知道)。至少你可以防止它被white-space: nowrap;包裹
所以你需要JS，使用offsetWidth之类的东西。我使用的是Vue，所以我不能提供任何细节，但我会从具有hidden-property的对象数组中呈现span-Elements，并在计算剩余的空间后关闭span，它超出了父div。当然，您也需要将数据绑定到show-more按钮，因为它并不总是可见的。当DOM最终呈现时，请小心执行计算。我相信在React-Lifecycle中有一个钩子。