如何用CSS在窗口缩放时裁剪HTML标签栏按钮？

嘿，作为HTML/CSS新手能写出这样的基础代码已经很棒啦！针对你想要实现窗口缩放时裁剪标签栏按钮的需求，我来给你一步步完善方案：

首先先整理你现有的代码（补全了按钮的类名）：

<style>
#TabsBar {
  padding: 0px 12px; /* 参考TopBanner的内边距 */
  height: 40px; /* 和TopBanner高度一致 */
  width: calc(100% - 24px); /* 抵消左右内边距的宽度 */
  background-color: blue;
  margin-bottom: 8px;
  overflow: hidden;
}

.Tabs {
  background-color: transparent;
  border: hidden;
  font-size: 120%;
  font-weight: bold;
  color: white;
  display: inline-block;
  padding: 0px 20px;
}

.HeightInherit {
  height: inherit;
}
</style>

<div id="TabsBar">
  <button class="Tabs HeightInherit">标签1</button>
  <button class="Tabs HeightInherit">标签2</button>
  <button class="Tabs HeightInherit">很长的标签名称示例</button>
  <button class="Tabs HeightInherit">标签4</button>
</div>

核心修改方案：确保按钮一行排列，超出部分自动裁剪 #

你已经给#TabsBar加了overflow: hidden，这是裁剪的基础，接下来只需要调整按钮的布局规则，让它们始终保持在一行，窗口缩小时超出容器的部分就会被自动裁剪：

1. 给按钮添加不换行规则：防止按钮内的文字换行，保证整体被裁剪
2. 改用Flex布局优化横向排列：比inline-block更稳定，能确保按钮垂直居中且排列整齐

修改后的CSS代码：

#TabsBar {
  padding: 0px 12px;
  height: 40px;
  width: calc(100% - 24px);
  background-color: blue;
  margin-bottom: 8px;
  overflow: hidden;
  /* 新增Flex布局 */
  display: flex;
  align-items: center;
}

.Tabs {
  background-color: transparent;
  border: hidden;
  font-size: 120%;
  font-weight: bold;
  color: white;
  padding: 0px 20px;
  /* 新增：禁止文字换行 */
  white-space: nowrap;
  /* 可选：设置按钮不被压缩宽度，优先裁剪而非缩小 */
  flex-shrink: 0;
}

.HeightInherit {
  height: inherit;
}

效果说明： #

• 当窗口宽度足够时，所有按钮正常显示在一行
• 窗口缩窄，标签栏宽度不足时，最右侧的按钮会被容器的overflow: hidden裁剪掉超出部分，保持整体布局整洁

扩展：如果想要裁剪时显示省略号（可选） #

如果你不想直接裁掉文字，而是显示...来提示有内容被隐藏，可以给.Tabs再添加以下属性：

.Tabs {
  /* 新增 */
  max-width: 120px; /* 可根据需求调整最大宽度 */
  text-overflow: ellipsis;
  overflow: hidden;
}

这样当按钮文字超过设定的最大宽度时，会自动显示省略号，而不是直接裁剪掉整个按钮。

试试上面的修改，应该就能完美实现你想要的效果啦！

内容的提问来源于stack exchange，提问作者Ahmad Al-Hourani