如何实现Ant Design多选pills按容器宽度而非数量触发...X more提示

这个方案完全具备可落地性，核心实现逻辑如下：

• 先关闭Ant Design多选组件默认的按固定数量触发溢出提示的逻辑，自定义选中标签的渲染容器
• 每次选中值变更、容器尺寸变化时，先计算容器可用总宽度，提前预留出「...X more」提示标签的固定占位宽度
• 按选中顺序逐个计算每个pills标签的实际渲染宽度，当累计标签宽度 + 下一个标签宽度超过预留后的可用空间时，停止渲染后续选中标签，直接渲染剩余数量的提示标签
• 可搭配ResizeObserver监听容器尺寸变化，在窗口缩放、容器宽度动态调整时自动重新计算可展示标签数量，适配响应式场景

你不需要修改组件底层源码，只需覆写多选组件的选中项渲染模板、替换原有固定阈值的溢出判断逻辑即可完成实现。如果要避免边界精度问题，可以在计算宽度时额外预留2-4px的间距容错，防止出现标签刚好超出导致换行的问题。

内容的提问来源于stack exchange，提问作者user1512593