如何实现Flex布局中元素按指定顺序依次截断

要实现先截断第二个元素（按钮）到最小宽度后，再截断第一个元素（标签），需要通过调整flex布局的收缩优先级和元素最小宽度来控制，具体修改如下：

修改后的CSS #

.container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.child {
  border: 1px solid;
  height: 40px;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn {
  min-width: 30px;
  /* 优先收缩，收缩比例高于标签 */
  flex: 1 2 auto;
}

.label {
  /* 后收缩，收缩比例低于按钮 */
  flex: 1 1 auto;
  /* 允许元素收缩到小于内容宽度，确保截断生效 */
  min-width: 0;
}

.status {
  /* 固定宽度，不参与收缩 */
  flex: 0 0 auto;
}

修改后的HTML #

<div class="container">
  <div class="child label">
    <h3 class="truncate">Item label with very long content to test truncation behavior</h3>
  </div>
  <div class="child btn truncate">
    Item Button with extended text
  </div>
  <div class="child status">
    Item Status
  </div>
</div>

关键逻辑说明 #

• 收缩优先级控制：通过flex-shrink属性设置收缩比例，按钮的flex-shrink:2比标签的flex-shrink:1更高，窗口缩小时按钮会先收缩。
• 最小宽度限制：按钮设置min-width:30px，当它收缩到该宽度后无法继续收缩，此时标签开始收缩。
• 标签截断前提：给标签元素设置min-width:0，打破flex元素默认的min-width:auto限制，确保标签可以收缩到小于内容宽度，触发文本截断。

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