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 有效
常见错误：给 立即学习“前端免费学习笔记（深入）”； 它必须配合 Flex 或 Block 布局使用，典型写法： 注意点： 几个现实限制： 当容器宽度随屏幕变化（比如 更隐蔽的问题： 真遇到这类问题，优先检查 computed styles 中 text-overflow 却忘了设 width 或 max-width，结果文字照常撑开容器——因为没触发 overflow。
多行文字省略不能靠
text-overflow，得用 -webkit-line-clamp
text-overflow: ellipsis 天然只支持单行。想截两行、三行并加省略号，必须换方案：-webkit-line-clamp 是目前最稳定、兼容性够用（Chrome/Safari/Firefox 73+ / Edge 79+）的 CSS 方案。.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”
text-overflow 的值不止 ellipsis，但其他值基本没人用text-overflow 还支持 clip（直接裁掉，不显示省略号）和自定义字符串（如 text-overflow: "…"），但实际中极少需要。
clip 和默认裁剪行为几乎一样，视觉上无差别，没必要显式声明……），若需后者，只能 JS 截取 + 拼接响应式场景下，省略逻辑容易被宽度重算破坏
max-width: 80% 或 flex 自适应），text-overflow 可能突然失效——不是代码错了，而是浏览器在 resize 后没及时重绘省略状态。
vw/vmin 设置宽度时，某些安卓 WebView 对 text-overflow 触发不敏感transform（如缩放），可能干扰 overflow 计算，导致省略失效overflow 是否为 hidden、width 是否有确定值，而不是怀疑属性本身。
