实现Windows系统Chrome标签页宽度自适应效果遇阻求助

我想要实现Windows系统中Chrome浏览器标签页的表现：

• 标签最小宽度等于关闭按钮的宽度
• 标签缩小时自动裁剪文本
• 可见文本与关闭按钮之间始终保留间隙

当前代码存在的问题：min-width: min-content未正常生效，文本未被裁剪，文本与关闭按钮之间没有间隙。

原代码 #

CSS #

#parent {
  background: grey;
  display: flex;
  height: 50px;
}

#item {
  align-items: center;
  display: flex;
  background: blue;
  min-width: fit-contents;
  width: 40px;
}

span {
  display: inline;
  min-width: 0;
  overflow: hidden;
  word-break: nowrap;
  padding-right: 5px;
}

button {
  display: block;
  width: 20px;
  height: 20px;
}

HTML #

<div id="parent">
  <div id="item">
    <span>Text</span>
    <button></button>
  </div>
</div>

修正后的解决方案 #

修正后的代码 #

CSS

#parent {
  background: grey;
  display: flex;
  height: 50px;
}

#item {
  align-items: center;
  display: flex;
  background: blue;
  /* 最小宽度等于按钮宽度，确保缩到最小仅显示按钮 */
  min-width: 20px;
  /* 允许标签在父容器空间不足时收缩 */
  flex-shrink: 1;
  /* 添加内边距模拟Chrome标签的内边距 */
  padding: 0 8px;
}

span {
  /* 让文本容器占据标签内剩余空间 */
  flex: 1;
  /* 允许文本容器收缩到内容宽度以下 */
  min-width: 0;
  overflow: hidden;
  /* 可选：添加省略号优化裁剪显示 */
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 文本与按钮之间的固定间隙 */
  margin-right: 8px;
}

button {
  display: block;
  width: 20px;
  height: 20px;
  /* 按钮固定宽度，不被挤压 */
  flex-shrink: 0;
}

HTML

<div id="parent">
  <div id="item">
    <span>这是一个很长很长的标签文本用来测试裁剪效果</span>
    <button>×</button>
  </div>
</div>

关键修改说明 #

• 标签最小宽度控制：给#item直接设置min-width: 20px（与按钮宽度一致），同时设置flex-shrink: 1允许标签在父容器空间不足时收缩；flex容器默认min-width: auto会被内容撑开，固定最小宽度更能精准实现需求。
• 文本裁剪生效：将span设为flex: 1使其占据标签内剩余空间，min-width: 0打破flex子项默认的收缩限制，配合overflow: hidden和white-space: nowrap实现文本裁剪；添加text-overflow: ellipsis可以显示省略号，更贴近Chrome的实际效果。
• 文本与按钮的间隙：给span添加margin-right替代原padding-right，因为span作为flex子项，margin能稳定保留间隙不受收缩影响；同时给button设置flex-shrink: 0，确保按钮不会被挤压变形。

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