text-overflow: ellipsis 实现单行省略需同时设置 white-space: nowrap 和 overflow: hidden；多行省略须用 -webkit-line-clamp 配合 display: -webkit-box。
单行文字省略用 text-overflow: ellipsis 必须配 white-space: nowrap 和 overflow: hidden
只写 text-overflow: ellipsis 没用，浏览器根本不会触发省略逻辑。它只是“告诉浏览器：该省略时请显示省略号”，但前提得让文字不换行、容器截断内容。
三个属性缺一不可：
-
white-space: nowrap—— 强制单行，否则文字会自然折行，text-overflow不生效 -
overflow: hidden—— 容器必须有明确的宽高（或受父容器约束），且内容溢出时要裁剪掉，否则没“可省略”的边界 -
text-overflow: ellipsis—— 真正渲染省略号的属性，仅对块级元素或 inline-block 有效
常见错误：给 <div> 加了 text-overflow 却忘了设 width 或 max-width，结果文字照常撑开容器——因为没触发 overflow。
多行文字省略不能靠 text-overflow，得用 -webkit-line-clamp
text-overflow: ellipsis 天然只支持单行。想截两行、三行并加省略号，必须换方案：-webkit-line-clamp 是目前最稳定、兼容性够用（Chrome/Safari/Firefox 73+ / Edge 79+）的 CSS 方案。
立即学习“前端免费学习笔记（深入）”；
它必须配合 Flex 或 Block 布局使用，典型写法：
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
注意点：
-
display: -webkit-box是必需的，不能用flex或grid替代，否则-webkit-line-clamp失效 -
-webkit-line-clamp是个非标准属性，但已被主流引擎长期支持，MDN 标记为 “widely supported” - 无法精确控制省略号位置（比如第二行末尾 vs 第三行开头），它总是出现在最后一行尾部
text-overflow 的值不止 ellipsis，但其他值基本没人用
text-overflow 还支持 clip（直接裁掉，不显示省略号）和自定义字符串（如 text-overflow: "…"），但实际中极少需要。
几个现实限制：
- 自定义字符串只在 Firefox 支持，Chrome/Safari 忽略，且不支持空格或复杂符号
-
clip和默认裁剪行为几乎一样，视觉上无差别，没必要显式声明 - 省略号始终是英文句点（U+2026）渲染，无法通过 CSS 改成中文省略号（
……），若需后者，只能 JS 截取 + 拼接
响应式场景下，省略逻辑容易被宽度重算破坏
当容器宽度随屏幕变化（比如 max-width: 80% 或 flex 自适应），text-overflow 可能突然失效——不是代码错了，而是浏览器在 resize 后没及时重绘省略状态。
更隐蔽的问题：
- 字体加载延迟（如 webfont）会导致初始渲染时文字未占位，省略号提前出现或不出现
- 使用
vw/vmin设置宽度时，某些安卓 WebView 对text-overflow触发不敏感 - 如果父元素用了
transform（如缩放），可能干扰 overflow 计算，导致省略失效
真遇到这类问题，优先检查 computed styles 中 overflow 是否为 hidden、width 是否有确定值，而不是怀疑属性本身。
