text-overflow: ellipsis 在 bem 中不生效的根本原因是缺失三个前提：容器需有明确宽度、文本禁止换行（white-space: nowrap）、溢出内容必须裁剪（overflow: hidden）；bem 块不提供布局约束，须通过修饰符（如 --truncate）封装完整截断链，含 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 及 width/max-width。
text-overflow: ellipsis 在 BEM 块里不生效，不是写错了 CSS，而是缺了三个硬性前提：容器要有明确宽度、文本不能换行、溢出内容得被裁掉。
为什么直接给 card__title 加 text-overflow 没反应
常见错误现象是加了 text-overflow: ellipsis，但文字照常换行或撑开父容器。根本原因在于 BEM 的块（如 card）只定义语义结构，不提供布局约束。它不管宽高、换行、溢出这些事。
-
card__title如果是 flex 子项，默认min-width: auto，会阻止overflow: hidden生效——必须显式设min-width: 0 - 在表格单元格里用，没配
table-layout: fixed，列宽算不准，width实际无效 - 父容器用了
display: grid或flex，但没限制子项尺寸，导致white-space: nowrap失效
用修饰符封装完整截断链，而不是只挂一个 text-overflow
BEM 的优势在于可复用，所以不该每次手动写三行样式。把截断逻辑抽成修饰符，比如 --truncate，并确保它自带全部必要声明。
- 修饰符要作用在文本元素上（如
card__title--truncate），而不是块级容器（如card--truncate） - 完整规则至少包含：
white-space: nowrap、overflow: hidden、text-overflow: ellipsis、width或max-width - 多行截断另起修饰符，如
--truncate-2，内部用-webkit-line-clamp+display: -webkit-box，不混用单行逻辑
Flex 容器里 text-overflow 失效的典型解法
Flex 子项默认 min-width: auto，会“撑开”容器，让 overflow: hidden 形同虚设。这不是 bug，是 flex 的设计行为。
- 对文本元素加
min-width: 0（或overflow: hidden已隐含该效果，但显式写更可靠） - 避免在 flex 容器上直接设
text-overflow，它不作用于 flex item，只对块级盒生效 - 如果父容器是
card__header，且里面只有card__title和card__meta，建议把截断逻辑放在card__title自身，而非提升到 header 层级
最易被忽略的是：BEM 修饰符不是装饰开关，它是完整行为契约。写 --truncate 就意味着你承诺它能独立工作，不依赖外部 width 或父级 display 类型。否则就不是封装，只是拼凑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
