加min-width: 0是关键，必须作用于flex容器的直接子元素（如.text），配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度约束，且四者须同级共存于同一块级元素。

为什么加了 text-overflow: ellipsis 还是不显示省略号

不是属性写错了，而是 Flex 子项默认 min-width: auto，浏览器强制它至少撑到内容自然宽度——“溢出”根本没发生，overflow: hidden 和 text-overflow: ellipsis 就全被跳过。DevTools 的 Computed 面板里如果看到 min-width: auto（不是 0px），基本就是它。

必须给哪个元素加 min-width: 0

只对 Flex 容器的**直接子元素**生效，且该元素得是你想截断文本的那个块级容器：

• min-width: 0 必须写在含文本的元素上（比如 .text 或 .content），不能只加在父容器或孙子节点
• 不能写成 min-width: 0px 或 min-width: 0% —— 只有无单位的 min-width: 0 是标准写法，Firefox 对非标准形式更敏感
• 如果该元素还设了 flex-shrink: 0，min-width: 0 会被无视，得删掉或改成 flex-shrink: 1
• 若子项内部又套了一层 display: flex（如头像+文字块），内层文字容器也得单独加 min-width: 0

text-overflow: ellipsis 生效的硬性组合缺一不可

这四个条件必须同时落在**同一个块级元素**上：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• display: block 或 display: inline-block（span 默认是 inline，不加会失效）
• white-space: nowrap（必须写在这里，不能写在父级；否则文字提前折行）
• overflow: hidden（裁剪动作本身，但没 min-width: 0 时常不触发）
• text-overflow: ellipsis（纯装饰层，不参与尺寸计算）
• 还得有明确宽度约束：比如 max-width: 100%、width: 200px，或用 flex: 1 1 0 显式设 flex-basis

嵌套 Flex 里长单词（如 JWT、日志 ID）还是撑开怎么办

text-overflow: ellipsis 对连续无空格长串无效，得靠内容层兜底：

• 优先用 overflow-wrap: break-word：处理中英文混排、带下划线的 ID 等有语义断点的场景
• 再加 word-break: break-all 作保险：防死循环，但慎用，可能在中文里断字
• 如果该文本容器里还有 <img>，务必补 max-width: 100%，否则图片固有尺寸会撑破限制

真正容易被忽略的是：所有条件必须落在同一层、同一元素上；哪怕只漏一个 min-width: 0，或者把 white-space: nowrap 写错位置，整条链路就断了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！