一行最多4个按钮，但是如果前面的按钮文字比较多，就自动往后顶，直至最大屏幕宽度，其他的就放到更多里面，怎么实现？

Question

要实现一个按钮组件
如下图，最多展示4个按钮，
如果超过4个按钮，那就展示3个按钮，其他放到更多里面

这部分都比较好实现，但是还有一个规定：
如果某个按钮文案比较长的话，是可以在屏幕剩余的宽度里面自动撑开的，那其他的按钮展示不下，就出现更多按钮。

例： 总共有2个按钮， 第一个按钮文案超长，超过屏幕了，那就展示屏幕大部分内容，然后再把剩余的按钮放到更多里面。

以上这些 按钮文案，按钮个数都是不固定的，未知的。

Answer 1

flex布局,按钮样式,width: max-content;max-width:第一行最大宽度;
容器高度设置一行高度，overflow:hidden；flex-wrap:wrap;
点击更多的时候,判断每一个按钮的位置离容器的高度

Answer 2

只用 CSS 做不到

我的想法是先让元素放到 html 中，然后计算这些元素的尺寸和位置，编写逻辑来将 overflow 的元素隐藏

可以试试 Element.getBoundingClientRect() - Web APIs | MDN 这个 API

如果是用 React，可以在 useLayoutEffect 中使用这个 API.

不过我觉得这个任务的成本太高，效果未必好，得不偿失。

Answer 3

Keywords: ResizeObserver
Solution Summary: 使用ResizeObserver监听父容器宽度，当组件挂载到页面上时计算子元素宽度之和是否大于父容器宽度。若子元素宽度之和大于父容器宽度，计算父容器可以容纳按钮的数量并按计算出的值显示按钮和更多按钮。若子元素宽度之和小于等于父容器宽度，正常显示。