css中flex容器内的文字溢出省略号失效，是因为flex子项的默认最小尺寸属性`min-width`为`auto`，导致子元素不会收缩到比其内容更小的宽度。要解决这个问题，需要显式设置子元素的`min-width: 0`（或`min-inline-size: 0`），从而允许flex布局引擎正确计算剩余空间并触发文本截断。
为什么Flex子项不收缩导致省略号失效
在Flex布局中，当父容器宽度小于子元素内容宽度时，子元素默认会保持其内容所需的宽度，而不是收缩以适应父容器。这是因为Flex项目的`min-width`和`min-height`默认值为`auto`。对于包含长文本的元素，`auto`值意味着最小宽度至少等于内容的自然宽度，因此即使父容器很窄，子元素也不会变窄，`text-overflow: ellipsis`也就无法生效，因为文本根本没有被挤压。
div {
display: flex;
width: 200px;
border: 1px solid #ccc;
}
.item {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* 缺少 min-width: 0; */
}
上述代码中，`.item`类没有设置`min-width: 0`。如果`.item`内部有一段很长的英文单词或连续字符，它将撑开父容器，或者如果父容器有固定宽度，它可能会溢出。省略号不会显示，因为文本没有被“隐藏”，而是保持了原始宽度。
如何修复Flex子项的文本截断问题
修复方法非常简单：在Flex子元素上添加`min-width: 0`。这会覆盖默认的`auto`行为，告诉Flex布局引擎：“这个元素可以收缩到比其内容更小的宽度”。一旦子元素能够收缩，`overflow: hidden`就会开始裁剪超出部分，而`text-overflow: ellipsis`则会用省略号替换被裁剪的文本。
div {
display: flex;
width: 200px;
border: 1px solid #ccc;
}
.item {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0; /* 关键修复 */
}
添加`min-width: 0`后，`.item`将不再强制保持其内容宽度。如果父容器宽度为200px，而内容很长，`.item`会被压缩到200px以内（具体取决于其他兄弟元素）。此时，超出的文本会被`overflow: hidden`隐藏，并由`text-overflow: ellipsis`显示为省略号。这是处理Flex容器中长文本截断的标准做法。
当Flex子项内容为空或极短时会发生什么
如果Flex子项的内容非常短，例如只有一个单词或几个字符，`min-width: 0`的影响微乎其微，因为子项的自然宽度本身就很小。在这种情况下，子项会根据`flex-grow`和`flex-shrink`属性正常分配空间。如果设置了`flex: 1`，子项会占据剩余空间，但由于内容很短，不会出现溢出，因此省略号也不会出现。这是预期行为，因为文本并没有溢出。只有在内容宽度超过可用空间时，`min-width: 0`才会触发截断逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
