text-overflow: ellipsis生效需同时满足white-space: nowrap、明确宽度约束（width/max-width）和overflow: hidden；flex布局中还需显式设置min-width: 0，否则子项默认min-width: auto会阻止截断。
直接加 text-overflow: ellipsis 通常没用——缺了三个前提：white-space: nowrap、固定宽度约束、overflow: hidden。这三者少一个，省略号就出不来。
为什么卡片标题一长就撑开？
根本不是“CSS没生效”，而是浏览器默认按内容撑宽容器。尤其当卡片用了 flex: 1 或 width: 100%，但没配 min-width: 0 时，Flex 子项会死守 min-width: auto，宁可拉伸整个卡片也不让文字换行或截断。
- 检查 computed 样式里
min-width是否真为0px，别只看声明 - 如果卡片父容器是
display: flex，标题元素必须是它的**直接子元素**，中间套一层<div> 就失效<li>旧版 Safari（≤15.6）不认 <code>flex: 1隐含的min-width: 0，必须显式写min-width: 0 - 必须同时设四条：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis+max-width（或width） -
max-width建议用响应式值，比如max-width: calc(100% - 48px)（预留图标/按钮空间） - 别在
<span></span>或<div> 上直接写这些，确保它在文档流中是块级表现——加 <code>display: block或display: inline-block多行截断：适合详情页摘要
比单行更容错，但需要 WebKit 特有语法，且对父容器高度有要求。
- 核心组合：
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: 2+overflow: hidden - 父容器必须有明确高度或
max-height，否则-webkit-line-clamp不触发 -
min-width: 0仍要加在该元素上——否则长 URL 或无空格英文仍会撑破 - Firefox 和部分新 Edge 已支持标准
line-clamp，但生产环境建议保留 WebKit 前缀
长单词/URL 怎么办？
中文标题一般没问题，但带英文路径、邮箱、哈希值的标题，
ellipsis无效，得靠换行兜底。- 优先用
overflow-wrap: break-word（兼容 iOS 11+ 和所有现代浏览器） - 加
word-break: break-all作后备，专治https://api.example.com/v1/token/abc123def456这类字符串 - 两者必须配合
min-width: 0和父容器max-width才生效；单独写等于白写 - 移动端 X5 内核（微信）不支持
overflow-wrap: anywhere，别指望用它替代
真正卡住人的从来不是哪一行 CSS，而是
min-width: 0漏写了、max-width忘设了、或者把截断样式加在了嵌套的第二层<div> 上——这些地方肉眼难查，得靠开发者工具看 computed 值确认。</div> - 核心组合：
单行截断：最稳的方案
适用于商品卡片、列表项等高度敏感场景。它不换行，靠视觉截断保齐整，兼容性好（IE10+ 支持）。
