先记住这个答案
评论里的长链接不出现省略号，未必是 text-overflow 写错；可能是装文字的 Flex 项一直按长链接的最小内容宽度占位，根本没有变窄。先在直接 Flex 子项上试 min-width: 0，观察盒子宽度是否变化。之后才检查显示文字的节点是否同时满足不换行、裁剪溢出和 text-overflow: ellipsis。
- 省略号不降低 Flex 项最小宽度
- 先给文本所在项设
min-width: 0 - 单行省略还需裁剪与不换行
- 嵌套 Flex 要逐层查约束
评论链接为何不显示省略号
评论列表左边头像，右边昵称和一条很长的链接。你给链接写了 text-overflow: ellipsis，却发现整张卡片横向滚动。检查布局时不要只看链接本身：昵称区域的父容器可能是那个 Flex 项，并且保留 min-width: auto。先解除这层的自动最小宽度，再确定哪一层需要裁剪。嵌套 Flex 时，几层祖先都可能需要处理。
.comment { display: flex; gap: 8px; }
.avatar { flex: none; width: 40px; }
.content { flex: 1; min-width: 0; }
.link {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; /* 文字盒子实际变窄后才可见 */
}外层解除宽度下限后，内层文字盒才有机会形成单行溢出。
外层不缩就没有文字溢出
省略号生效要有溢出、单行不换行，以及受约束的显示宽度。Flex 项若被内容最小宽度撑到足够宽，它内部的文本对自己而言并没有溢出，自然不会画省略号。overflow: hidden 负责裁剪，white-space: nowrap 保证单行，text-overflow: ellipsis 决定裁剪位置显示省略标记；外层 min-width: 0 则让整列真能变窄。这几个声明解决的是不同阶段的问题。
还有一个常见层级陷阱：省略号写在里面的 <span> 上，但真正参与 Flex 的是外层 .comment。只给 <span> 设 min-width: 0，不会放松 .comment 的自动最小宽度；需要沿 DOM 向上找到直接 Flex 项，检查每一级是否有固定宽度、white-space: nowrap 或无法断开的内容。改完后在窄屏手动验证：如果文字仍完整显示到容器外，说明盒子已缩而内容没裁；如果整个评论区仍推开头像，说明上层尺寸约束还没解除。
容易答错的地方
- 只补
text-overflow: ellipsis - 它不设置宽度，也不阻止外层 Flex 项被内容撑开。
- 把整个卡片都设为
overflow: hidden - 卡片不横向滚动了，但可能把头像或操作按钮一起裁掉；应该定位到文本区域。
面试官还会怎么问？
为什么 overflow-wrap: anywhere 也能缓解？
它提供额外的断行机会，降低文本的最小内容宽度，适用于希望完整展示内容的场景。
省略号必须写固定像素宽度吗？
不必。Flex 项有受约束的可用宽度、允许收缩，并在文本盒上设置单行裁剪条件即可。
中间有两层 Flex 容器怎么办？
从最外层溢出处逐层检查直接 Flex 项的 min-width；其中任何一层卡住，内层省略号都可能无效。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。