如何用CSS实现左右按钮文本省略且自适应视口的Flex布局

问题回顾 #

当前小视口下的Flex按钮组存在三个问题：

• 右侧长文本按钮被过度撑大
• 超长文本未自动显示省略号
• 按钮左右16px内边距未正确保留

需求目标：

• 左右两侧按钮通过flex:1保持等宽
• 中间按钮仅适配自身内容宽度
• 左右按钮文本超长时自动显示省略号，同时严格保留16px左右内边距

实现代码 #

HTML结构

<div class="button-group">
  <button class="btn btn-equal">这是一段超长的左侧按钮测试文本内容</button>
  <button class="btn btn-fit">中间操作</button>
  <button class="btn btn-equal">右侧按钮文本长度远超容器宽度需要自动省略</button>
</div>

CSS样式

/* 按钮组容器：基础Flex布局 */
.button-group {
  display: flex;
  width: 100%; /* 撑满小视口宽度 */
  gap: 8px; /* 按钮间间距，可按需调整 */
  padding: 12px; /* 可选，避免按钮贴视口边缘 */
  box-sizing: border-box;
}

/* 通用按钮样式：统一内边距与文本省略基础 */
.btn {
  padding: 10px 16px; /* 固定左右16px内边距，上下内边距可自定义 */
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f5f5f5;
  cursor: pointer;
  /* 文本省略核心三规则 */
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  box-sizing: border-box; /* 确保内边距不额外增加按钮宽度 */
}

/* 左右按钮：等宽分配剩余空间 */
.btn-equal {
  flex: 1; /* 等价于 flex: 1 1 0%，自动平分容器剩余可用空间 */
}

/* 中间按钮：适配自身内容宽度 */
.btn-fit {
  flex: 0 0 auto; /* 禁止拉伸/压缩，仅占用内容所需宽度 */
}

关键规则解析 #

• 内边距保留：通过box-sizing: border-box确保padding不会增加按钮的总宽度，严格维持左右16px的留白区域。
• 等宽与省略效果：flex:1让左右按钮平分容器剩余空间，配合文本省略三规则，在按钮可用宽度内自动截断超长文本并显示省略号，省略区域不会覆盖内边距。
• 中间按钮适配：flex: 0 0 auto完全禁用Flex布局对中间按钮的尺寸调整，使其宽度仅由自身内容决定。

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