如何用纯CSS实现长元素优先截断的芯片式列表布局？

有一组国家名称列表（如阿富汗、智利、圣文森特和格林纳丁斯），被放置在带有最大宽度限制的芯片（chip）容器中。当列表总宽度达到容器最大宽度时，要求优先截断长名称（如圣文森特和格林纳丁斯），最后截断短名称（如智利）。需要仅用CSS实现：短元素获得所需空间后，长元素占用剩余空间，且优先截断长元素。此前尝试过flex布局，但会按宽度比例截断所有元素；也尝试过给所有元素设置相同宽度，但短元素尾部会有空余空间。

解决方案 #

可以通过Flex布局结合灵活的收缩规则实现需求，核心思路是让短元素保持固定宽度不收缩，长元素根据剩余空间自适应，且通过调整收缩权重优先截断更长的元素：

• 容器基础设置：给芯片容器设置display: flex、max-width（限制最大宽度）、gap（控制芯片间间距），确保元素横向排列且有明确宽度限制。
• 短元素配置：给短名称元素添加flex-shrink: 0，强制它们不收缩，始终保留自身所需的完整宽度。
• 长元素配置：给长名称元素添加flex-shrink: 1（值越大收缩优先级越高），同时设置white-space: nowrap、overflow: hidden、text-overflow: ellipsis，实现超出时的省略号截断。如果有多个不同长度的长元素，可给最长的设置更高的flex-shrink值，让它优先被截断。

代码示例 #

HTML

<div class="chip-container">
  <span class="chip short">阿富汗</span>
  <span class="chip short">智利</span>
  <span class="chip long">圣文森特和格林纳丁斯</span>
</div>

CSS

.chip-container {
  display: flex;
  max-width: 300px; /* 根据需求设置最大宽度 */
  gap: 8px;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.chip {
  padding: 4px 8px;
  background: #f5f5f5;
  border-radius: 4px;
  white-space: nowrap;
}

.chip.short {
  flex-shrink: 0; /* 短元素不收缩 */
}

.chip.long {
  flex-shrink: 1; /* 长元素可收缩，优先级可根据长度调整 */
  overflow: hidden;
  text-overflow: ellipsis;
}

进阶调整 #

如果存在多个长度不同的长元素，比如还有“巴布亚新几内亚”这类更长的名称，可以给它设置更高的收缩权重，让它优先被截断：

.chip.extra-long {
  flex-shrink: 2; /* 更高的收缩权重，优先截断 */
  overflow: hidden;
  text-overflow: ellipsis;
}

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