长文本导致Flex容器尺寸异常调整的解决方法问询

要实现你需要的效果，只需调整两处关键CSS属性：

• 给.container添加min-width: 0：Flex子项默认的min-width: auto会让容器被内容撑开，设置min-width: 0能打破这个默认行为，让容器严格遵守flex:1的宽度分配规则。
• 给span设置display: block：text-overflow: ellipsis仅对块级/行内块级元素生效，设置成块级后，span会继承父容器的宽度限制，触发文本截断逻辑。

修改后的完整CSS代码 #

.wrapper {
  width: 50%;
  display: flex;
  background-color: green;
}

.container {
  flex: 1;
  margin: 10px;
  border: 2px solid blue;
  height: 200px;
  background: pink;
  min-width: 0; /* 关键：打破flex子项的最小宽度默认值 */
}

span {
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block; /* 关键：让span成为块级元素，继承父容器宽度 */
  padding: 0 5px; /* 可选：添加内边距避免文本贴边 */
}

HTML代码无需修改 #

<div class="wrapper">
  <div class="container">
    <span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </span>
  </div>
  <div class="container"></div>
</div>

原理补充 #

1. min-width: 0：Flex布局中，子元素默认不会小于自身内容宽度，设置该属性后，容器会优先遵循flex:1的宽度分配，即使内容过长也不会撑开容器。
2. display: block：让span填满父容器的可用宽度，满足text-overflow生效的元素类型要求，最终实现文本超出时显示省略号。

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