如何实现自适应尺寸工具栏？支持按钮换行及谷歌表格式显示更多

这个需求我之前做过类似的，结合CSS弹性布局和少量JavaScript就能完美复刻你想要的效果——窗口缩小时自动检测溢出，显示“显示更多”按钮，点击后展开所有换行的按钮，和谷歌表格的交互逻辑完全一致。

实现思路 #

1. 用flex布局搭建工具栏基础结构，默认让按钮不换行、超出隐藏
2. 通过JS检测按钮容器的实际宽度和可视宽度，判断是否需要显示“显示更多”按钮
3. 点击“显示更多”时切换按钮容器的换行规则，支持展开/收起状态切换

完整代码示例 #

HTML结构

<div class="toolbar">
  <div class="buttons-wrap">
    <button class="toolbar-btn">格式刷</button>
    <button class="toolbar-btn">加粗</button>
    <button class="toolbar-btn">斜体</button>
    <button class="toolbar-btn">下划线</button>
    <button class="toolbar-btn">删除线</button>
    <button class="toolbar-btn">合并单元格</button>
    <button class="toolbar-btn">左对齐</button>
    <button class="toolbar-btn">居中对齐</button>
    <button class="toolbar-btn">右对齐</button>
    <button class="toolbar-btn">换行</button>
    <button class="toolbar-btn">插入图片</button>
    <button class="toolbar-btn">插入链接</button>
  </div>
  <button class="toolbar-btn more-btn" id="moreBtn">显示更多</button>
</div>

CSS样式

/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, sans-serif;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: #f1f3f4;
  border-radius: 8px;
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  flex-wrap: wrap; /* 极端情况确保"显示更多"按钮能换行 */
}

.buttons-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap; /* 默认不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  transition: flex-wrap 0.2s ease;
}

.toolbar-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  font-size: 14px;
  color: #202124;
  white-space: nowrap; /* 按钮文本强制不换行 */
  transition: background-color 0.2s ease;
}

.toolbar-btn:hover {
  background-color: #dadce0;
}

.toolbar-btn:active {
  background-color: #bdc1c6;
}

.more-btn {
  display: none; /* 默认隐藏 */
  margin-left: auto; /* 固定在工具栏右侧 */
}

JavaScript逻辑

const buttonsWrap = document.querySelector('.buttons-wrap');
const moreBtn = document.getElementById('moreBtn');

// 检测是否需要显示"显示更多"按钮
function checkOverflow() {
  // 比较按钮容器的实际宽度和可视宽度，判断是否溢出
  const hasOverflow = buttonsWrap.scrollWidth > buttonsWrap.offsetWidth;
  moreBtn.style.display = hasOverflow ? 'block' : 'none';
}

// 页面加载时初始化检测
checkOverflow();

// 窗口大小变化时重新检测
window.addEventListener('resize', checkOverflow);

// "显示更多"按钮点击交互
moreBtn.addEventListener('click', () => {
  if (buttonsWrap.style.flexWrap === 'wrap') {
    // 切换为收起状态
    buttonsWrap.style.flexWrap = 'nowrap';
    moreBtn.textContent = '显示更多';
  } else {
    // 切换为展开状态
    buttonsWrap.style.flexWrap = 'wrap';
    moreBtn.textContent = '收起';
  }
  // 延迟检测确保状态切换完成后显示正确
  setTimeout(checkOverflow, 100);
});

效果说明 #

• 窗口宽度充足时：所有按钮正常显示，“显示更多”按钮自动隐藏
• 窗口缩小到按钮溢出时：“显示更多”按钮自动出现，超出的按钮被隐藏
• 点击“显示更多”：按钮容器切换为换行模式，所有按钮全部展开显示，按钮文本变为“收起”；再次点击恢复原状态

这个方案的优势是：

• 仅用少量JS配合CSS，性能开销极低
• 完全对齐谷歌表格的交互逻辑，用户体验自然
• 按钮样式可根据需求快速调整，适配不同设计风格

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