text-overflow: ellipsis 仅对 block 或 inline-block 元素生效，且必须同时满足 white-space: nowrap、overflow: hidden 和明确的 width/max-width；flex 容器中需加 min-width: 0，多行省略需用 -webkit-box 方案。
text-overflow: ellipsis 为啥不生效
直接原因：它只对 block 或 inline-block 元素起作用，且必须同时满足三个条件——white-space: nowrap、overflow: hidden、width（或 max-width）有明确限制。缺一不可。
常见错误现象：text-overflow: ellipsis 写了但文字照常换行或撑开容器；或者只加了 overflow: hidden，没设 white-space，结果文字被截断却没省略号。
-
white-space: nowrap是关键，它阻止换行，让文本变成“一行内横向延伸”，text-overflow才有机会介入 - 如果父容器是
display: flex，子元素默认不收缩，得额外加min-width: 0或overflow: hidden到子元素上，否则宽度计算失效 - 在表格单元格（
td）里用，需确保table-layout: fixed，否则width约束可能被忽略
多行文本省略号怎么实现
CSS 原生不支持多行 text-overflow: ellipsis，但可以用 display: -webkit-box 方案兼容主流浏览器（Chrome/Safari/Edge），Firefox 支持有限。
使用场景：卡片标题、列表摘要、移动端新闻标题等需要控制 2–3 行高度的场合。
立即学习“前端免费学习笔记（深入）”；
- 必须写全三件套：
display: -webkit-box+-webkit-line-clamp: 2+-webkit-box-orient: vertical -
-webkit-line-clamp只接受整数，不能写1.5或calc() - 该方案下
overflow: hidden仍需保留，但white-space要设为normal（不是nowrap） - 注意和
line-height配合：最终高度 ≈line-height × line-clamp，别让容器高度卡死导致截断异常
flex 容器里 text-overflow 失效怎么办
根本原因是 flex 子项默认 min-width: auto，会优先保持内容最小宽度，无视父容器的 width 或 flex-basis 限制，导致 overflow: hidden 形同虚设。
实操建议：给需要省略的文本元素显式设置 min-width: 0（或 overflow: hidden），强制它参与 flex 压缩。
- 错误写法：
div { display: flex; } span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }—— 缺少min-width: 0 - 正确写法：
span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - 如果用了
flex: 1，也得同步加min-width: 0，否则 flex 伸缩逻辑会绕过溢出控制 - 不要依赖
flex-shrink: 1单独解决问题，它不改变最小宽度行为
中英文混排时省略号位置偏移或断字
本质是字体度量差异和浏览器对 text-overflow 截断点的判断逻辑：它按字符边界截，不识别语义词边界，中文无空格更易在字中间“硬切”。
影响不大但肉眼明显：省略号贴着前一个汉字太近，或英文单词被劈成两半（如 exa…）。
- 加
text-rendering: optimizeLegibility有助于改善连字与断字，但兼容性一般（Safari/Chrome OK，Firefox 弱） - 更稳妥的是服务端或 JS 预处理：按字数 + 字节数做安全截断，末尾手动补
…，避开 CSS 截断不确定性 - 避免在
letter-spacing较大的场景用省略号，容易让…漂移出视觉焦点区域 - 测试时务必用真实数据：含 emoji、全角标点、长 URL 的文本最容易暴露问题
最常被忽略的一点：所有这些样式都依赖渲染时的尺寸计算，如果元素初始 display: none 或在懒加载容器里，得等它真正进入布局流后再应用规则——否则 JS 动态插入样式也可能因时机不对而失败。
