如何动态调整按钮显示，一行最多四个，超长自动换行并收纳至“更多”按钮？

如何优雅地动态调整按钮显示，实现一行最多四个，超长自动换行，并把多余按钮收纳进“更多”按钮？

本文介绍一种高效的按钮组件设计方案，满足以下需求：最多显示四个按钮；按钮文字长度可变，自动撑开，但不会超过单行最大宽度；当按钮数量超过四个或总宽度超过容器宽度时，剩余按钮将被收纳进“更多”按钮。

核心技术在于灵活运用flexbox布局。首先，为按钮容器设置flex布局，并启用flex-wrap: wrap;，允许按钮自动换行。容器高度设置为单行按钮高度，并使用overflow: hidden;隐藏超出部分。

每个按钮的样式需设置width: max-content;，使其宽度根据内容自适应，同时设置max-width属性，限制按钮最大宽度，该宽度应等于容器单行可容纳的最大按钮宽度。这样，单个按钮不会因文字过长而占据整行。

当按钮数量超过四个或总宽度超过容器宽度时，“更多”按钮出现。点击“更多”按钮后，需要判断哪些按钮被隐藏，并显示它们。这可以通过计算每个按钮相对于容器的偏移量来实现：遍历每个按钮，检查其垂直位置是否超过容器高度，超过则说明该按钮应包含在“更多”按钮中。

综上所述，结合css Flexbox和JavaScript动态计算，即可实现动态调整按钮显示，提升用户体验，在有限屏幕空间内有效展示大量按钮信息。