flex项文字溢出不隐藏需设min-width: 0，单行省略须white-space: nowrap、overflow: hidden、text-overflow: ellipsis三者同置；多行省略依赖-webkit-box方案，兼容性受限。

flex项里文字溢出不隐藏？先确认父容器没漏设min-width: 0

Flex子项默认有min-width: auto，会阻止overflow: hidden生效——哪怕你写了white-space: nowrap和text-overflow: ellipsis，文字照样撑开容器。

真正起作用的是给子项加min-width: 0（或min-width: min-content），让flex算法允许它收缩到内容最小宽度以下。

• 只对display: flex的直接子项有效，嵌套flex需逐层检查
• min-width: 0比overflow: hidden更优先影响flex计算，顺序无关
• 在Firefox中尤其明显，Chrome部分版本会“悄悄修复”，但别依赖

单行省略必须配齐三件套：white-space、overflow、text-overflow

只写overflow: hidden不够。单行截断需要三者同时存在，缺一不可，且必须作用于同一元素：

• white-space: nowrap：禁止换行
• overflow: hidden：裁剪超出部分
• text-overflow: ellipsis：显示省略号

常见错误是把white-space: nowrap写在父级，或误用word-break: break-all——后者会强制断词，破坏语义，也压根不触发ellipsis。

多行省略不能靠CSS原生实现？用display: -webkit-box要小心兼容性

CSS没有标准的多行text-overflow: ellipsis，目前唯一可靠方案是WebKit私有属性：

MoltOverflow

Moltbots问答社区 - 提问编程问题，分享解决方案

下载

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

但它有硬伤：

• 仅在WebKit内核（Chrome/Safari/Edge新版）有效，Firefox完全不支持
• -webkit-line-clamp对flex子项有时失效，尤其当父容器高度不固定时
• 若内容含inline-block或img等非纯文本节点，可能截断错位

用flex-shrink: 1替代flex: 1能避免意外撑宽

flex: 1等价于flex: 1 1 0%，其中第二个1表示flex-shrink: 1，看似合理——但当子项含长单词或URL时，浏览器可能优先压缩空白而非截断文本，导致overflow: hidden形同虚设。

更稳的做法是显式控制收缩行为：

• 用flex: 0 1 auto（不放大、可缩小、基准为内容宽）
• 配合max-width: 0 + min-width: 0，强制flex算法从零开始分配空间
• 对含URL的文本，额外加word-break: break-word，但别用break-all

最麻烦的地方往往不是写哪几行CSS，而是flex容器本身的高度来源是否稳定——比如父级用height: 100%但祖先没设高度，整个链路就失效了。

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