如何動態調整按鈕顯示，一行最多四個，超長自動換行并收納至“更多”按鈕？

如何優雅地動態調整按鈕顯示，實現一行最多四個，超長自動換行，并把多余按鈕收納進“更多”按鈕？

本文介紹一種高效的按鈕組件設計方案，滿足以下需求：最多顯示四個按鈕；按鈕文字長度可變，自動撐開，但不會超過單行最大寬度；當按鈕數量超過四個或總寬度超過容器寬度時，剩余按鈕將被收納進“更多”按鈕。

核心技術在于靈活運用flexbox布局。首先，為按鈕容器設置flex布局，并啟用flex-wrap: wrap;，允許按鈕自動換行。容器高度設置為單行按鈕高度，并使用overflow: hidden;隱藏超出部分。

每個按鈕的樣式需設置width: max-content;，使其寬度根據內容自適應，同時設置max-width屬性，限制按鈕最大寬度，該寬度應等于容器單行可容納的最大按鈕寬度。這樣，單個按鈕不會因文字過長而占據整行。

當按鈕數量超過四個或總寬度超過容器寬度時，“更多”按鈕出現。點擊“更多”按鈕后，需要判斷哪些按鈕被隱藏，并顯示它們。這可以通過計算每個按鈕相對于容器的偏移量來實現：遍歷每個按鈕，檢查其垂直位置是否超過容器高度，超過則說明該按鈕應包含在“更多”按鈕中。

綜上所述，結合css Flexbox和JavaScript動態計算，即可實現動態調整按鈕顯示，提升用戶體驗，在有限屏幕空間內有效展示大量按鈕信息。