text-overflow: ellipsis 必须配合 white-space: nowrap、overflow: hidden 和 width（或 max-width）才生效；多行省略需 -webkit-box 与 -webkit-line-clamp；Flex 中还需 min-width: 0 和 flex-shrink: 1。
text-overflow: ellipsis 必须配合哪些 CSS 属性才生效
单独写 text-overflow: ellipsis 没用，它只是“最后一环”，真正起作用的是三个属性的组合：必须同时设置 white-space: nowrap、overflow: hidden 和 width（或 max-width）。
常见错误是只加了 text-overflow，结果文字照常换行或溢出容器。这是因为：
-
white-space: nowrap阻止换行，让文本变成单行流 -
overflow: hidden切掉超出部分，为省略号腾出“裁剪空间” -
width或max-width给容器设硬性边界，否则overflow无从触发
多行文字想用省略号？CSS 原生不支持，得绕路
CSS 的 text-overflow: ellipsis 仅对单行有效。想实现两行或三行末尾加省略号，不能只靠这个声明。
目前稳定可用的方案是：
立即学习“前端免费学习笔记（深入）”；
- 用
display: -webkit-box+-webkit-line-clamp（仅 WebKit 内核，Chrome/Safari/Edge 新版支持，Firefox 不支持） - 服务端截断 + 后缀加
…（最兼容，但需控制字数与宽度关系） - JS 动态计算并截断（如用
element.scrollWidth > element.clientWidth判断是否溢出）
注意：-webkit-line-clamp 必须搭配 display: -webkit-box 和 -webkit-box-orient: vertical 才能生效，缺一不可。
中文/数字/标点混排时省略号位置异常？检查 font-family 和 letter-spacing
某些字体（尤其是非等宽中文字体）在缩放或设置了 letter-spacing 后，text-overflow: ellipsis 可能提前触发，导致最后一个字被截掉一半，或省略号紧贴文字没空隙。
可尝试的调整点：
- 去掉不必要的
letter-spacing，或改用margin-right模拟字间距 - 确保
font-family在各浏览器中 fallback 一致，避免渲染宽度突变 - 给容器加
padding-right: 4px，为省略号留出视觉缓冲（省略号本身不占 content 宽度，但视觉上需要呼吸感）
Flex/Grid 容器里 text-overflow 失效？重点查 flex-shrink 和 min-width
在 display: flex 或 display: grid 中，子元素默认可能撑开父容器，导致 width 约束失效，进而使 text-overflow 不触发。
关键修复方式：
- 给文字容器加
flex-shrink: 1（默认是 1，但有时被重置） - 显式设置
min-width: 0（Flex item 默认min-width: auto，会阻止收缩） - 避免父容器用
flex: 1却没设max-width，否则子元素 width 计算可能脱离预期
.container {
display: flex;
}
.text-box {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
min-width: 0;
width: 200px; /* 或 max-width */
}最常被忽略的是 min-width: 0 —— 它不是锦上添花，而是 Flex 场景下 text-overflow 能否工作的分水岭。
