如何在无固定宽度的Flex子项中实现text-overflow:ellipsis效果？

问题核心是flex子项默认的min-width:auto会让子项被内部内容撑开，导致无法限制宽度，进而使text-overflow:ellipsis失效。只需两步调整即可解决：

1. 给设置了flex-grow:1的子项添加min-width:0，打破默认的最小宽度限制，让它能被父容器的剩余空间约束。
2. 移除内部文本容器的display:flex（flex容器会干扰文本溢出规则的生效），保留文本溢出所需的核心属性。

修改后的完整代码 #

CSS代码

.menu {
  display: flex;
  border: 1px solid red;
  width: 500px;
}

.menu__item {
  border: 1px solid black;
  padding: 5px;
}

.menu__item--description {
  flex-grow: 1;
  min-width: 0; /* 关键：允许子项宽度收缩到小于内容宽度 */
}

.menu__item--description div {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

HTML代码

<div class="menu">
  <div class="menu__item">One</div>
  <div class="menu__item">Two</div>
  <div class="menu__item">Three</div>
  <div class="menu__item menu__item--description">
    <div>
      But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system
    </div>
  </div>
</div>

原理说明 #

• min-width:0：Flex子项默认min-width:auto，意味着子项宽度至少要容纳内部内容，这会导致即使设置了flex-grow:1，子项也会被过长文本撑大，超出父容器。添加min-width:0后，子项宽度会被限制在父容器的剩余空间内。
• 移除内部容器的display:flex：text-overflow:ellipsis要求元素为块级/内联块级，flex容器下该规则无法正常生效，移除后即可触发文本溢出省略效果。

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