Flex布局容器内双项共存如何让右侧名称优先占宽并截断左侧分类

核心思路 #

• 给姓名元素设置flex-shrink: 0，禁止收缩，永远优先展示完整内容
• 给分类元素设置flex-grow: 1，自动占满父容器除姓名外的所有剩余宽度
• 给分类元素添加文本溢出省略号规则，同时设置最小宽度保证至少展示3个字符

完整代码示例 #

<div class="my-item">
  <div class="category">Supervisory Manager</div>
  <div class="name">Mrs Jacqueline Bennington-Smyth</div>
</div>

<!-- 短姓名测试用例 -->
<div class="my-item" style="margin-top: 10px;">
  <div class="category">Firefighter Decorated</div>
  <div class="name">John Smith</div>
</div>

.my-item {
  display: flex;
  width: 500px; /* 可根据业务场景调整容器宽度 */
  align-items: center;
  border: 1px solid #eee; /* 仅用于可视化边界，可删除 */
  padding: 8px 12px;
}

.category {
  flex-grow: 1;
  /* 文本溢出省略配置 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 保证至少展示3个字符，可根据字体大小调整 */
  min-width: 3em;
}

.name {
  /* 禁止收缩，优先展示完整内容 */
  flex-shrink: 0;
  margin-left: 16px;
}

效果说明 #

• 当姓名内容较长时：分类元素自动收缩，超出部分末尾显示省略号，姓名完整展示，符合|Supervisor... Mrs Jacqueline Bennington-Smyth|预期效果
• 当姓名内容较短时：分类元素占满所有剩余宽度，完整展示分类内容，符合|Firefighter Decorated John Smith|预期效果

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