答案：使用 flex-shrink 配合 overflow 和 text-overflow 可处理文本溢出，需设置 min-width: 0 允许压缩并结合 white-space: nowrap 实现单行省略，多行则用 -webkit-line-clamp。
当使用 Flexbox 布局时，子元素内的文本溢出是常见问题，尤其是在空间不足的情况下。要正确处理文本溢出并结合 flex-shrink 与 overflow 属性，关键在于理解它们的协作机制。
flex-shrink 如何影响子元素尺寸
flex-shrink 控制子元素在容器空间不足时是否缩小。默认值为 1，表示允许压缩。若设置为 0，则子元素不会缩小，容易导致内容溢出容器。
常见情况：- 子元素设置了固定宽度或内容过长
- flex-shrink: 1 允许压缩，但未设置 overflow 处理文本
- 即使压缩后，文本仍可能换行或溢出可视区域
overflow 与 text-overflow 配合截断文本
仅设置 overflow: hidden 不足以实现单行省略效果，需结合 text-overflow: ellipsis 和 white-space: nowrap。
基本样式示例：
.flex-item {
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
这样可确保文本在容器压缩后自动截断并显示省略号。
防止子元素被过度压缩的方法
有时 flex-shrink 会让子元素缩得太小，影响可读性。可通过以下方式控制最小宽度：
- 设置 min-width: 0（Flexbox 默认会阻止文本截断，需显式启用）
- 使用 min-width 限定最小空间，如 min-width: 100px
- 用 flex-basis 配合 shrink 调整初始尺寸
.flex-container {
display: flex;
}
.flex-item {
flex: 1 1 200px; / flex-grow, flex-shrink, flex-basis /
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行文本溢出处理技巧
对于多行文本，标准 ellipsis 不适用，需使用 WebKit 特性或 JS 方案。
两行省略示例：
.flex-item {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex-shrink: 1;
min-width: 0;
}
注意：需确保父容器有明确宽度或已正确收缩。
基本上就这些。关键是让 flex-shrink 正常工作的同时，通过 min-width: 0 解除默认最小尺寸限制，并正确设置文本溢出样式。不复杂但容易忽略细节。
