窗口缩放时按指定顺序截断容器内元素的实现方案咨询

核心思路是借助CSS Flexbox的flex-shrink属性控制元素收缩优先级，搭配min-width定义元素最小尺寸，结合文本截断样式，实现你指定的顺序截断逻辑。以下是分步实现细节：

一、基础布局配置 #

首先给容器设置display: flex和flex-wrap: nowrap，强制所有子元素在一行排列；同时给所有子元素默认设置flex-shrink: 0，后续为需要收缩的元素设置不同flex-shrink值——数值越大，收缩优先级越高（越先被截断/隐藏）。

.container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
}
.container > * {
  flex-shrink: 0;
}

二、按指定顺序实现截断 #

1. 先截断编辑按钮文本，仅保留图标 #

给编辑按钮的文本部分设置最大宽度，开启文本截断，同时设置较低的flex-shrink值让它最先收缩：

.edit-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}
.edit-btn__text {
  max-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

当容器宽度不足时，文本会先被截断，直到完全隐藏，仅保留图标。

2. 截断列表项 #

给列表容器设置更高的flex-shrink值，内部列表项强制不换行，超出部分隐藏：

.items-wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  flex-shrink: 2;
}
.item {
  min-width: 36px;
  margin-right: 6px;
  white-space: nowrap;
}

当容器继续缩窄，列表项会从右侧开始被隐藏，直到剩余空间仅能容纳部分列表项。

3. 隐藏编辑按钮的图标 #

给编辑按钮设置最小宽度（等于图标的宽度），并设置更高的flex-shrink值，当容器宽度不足以容纳按钮的最小宽度时，隐藏图标：

.edit-btn {
  min-width: 24px; /* 图标宽度 */
  flex-shrink: 3;
}
/* 当容器宽度小于阈值时，隐藏图标 */
@media (max-width: 550px) {
  .edit-btn__icon {
    display: none;
  }
}

4. 截断状态文本，至少保留1个字符 #

给状态文本设置flex-shrink: 4，定义最小宽度（足够容纳1个字符），并通过媒体控制省略号的显示：

.status {
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 4;
  min-width: 18px;
  max-width: 80px;
}
/* 宽度足够时显示省略号 */
@media (min-width: 480px) {
  .status {
    text-overflow: ellipsis;
  }
}
/* 达到最小宽度时，隐藏省略号，仅保留1个字符 */
@media (max-width: 479px) {
  .status {
    text-overflow: clip;
  }
}

5. 最后截断“My btn”，仅保留1个字符+箭头图标 #

给“My btn”容器设置最高的flex-shrink: 5，定义最小宽度（1个字符+箭头的宽度），同样通过媒体控制省略号：

.my-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 5;
  min-width: 36px; /* 1个字符+箭头的宽度 */
}
.my-btn__text {
  white-space: nowrap;
  overflow: hidden;
  max-width: 70px;
}
/* 宽度足够时显示省略号 */
@media (min-width: 420px) {
  .my-btn__text {
    text-overflow: ellipsis;
  }
}
/* 达到最小宽度时，仅保留1个字符，隐藏省略号 */
@media (max-width: 419px) {
  .my-btn__text {
    text-overflow: clip;
    max-width: 16px;
  }
}

三、补充说明 #

• 所有需要收缩的元素必须设置min-width，防止被无限压缩到消失。
• flex-shrink的数值顺序直接对应你的截断优先级，按需求调整数值即可。
• 媒体查询的阈值需要根据你的实际元素宽度调整，确保触发时机符合预期。
• 如果需要更精确的动态控制，可以结合JS监听容器的宽度变化，动态修改元素的样式（比如省略号的显示、元素的隐藏）。

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