text-overflow: ellipsis 必须配合 white-space: nowrap、overflow: hidden 和 width（或 max-width）才生效；多行省略需用 -webkit-line-clamp 并配合 display: -webkit-box 等属性。
text-overflow: ellipsis 必须配合哪些 CSS 属性才生效
text-overflow: ellipsis 单独写完全没用，它只负责“画省略号”，但不控制换行和截断逻辑。真正起作用的是三者协同：white-space、overflow 和 width（或 max-width）。
常见错误是只加 text-overflow: ellipsis，结果文本照常换行或直接撑开容器。
-
white-space: nowrap：强制单行不换行（最常用），否则多行文本无法触发单行省略 -
overflow: hidden：隐藏溢出内容，没有它，省略号不会显示，多余文字会直接露出来 - 必须有明确的宽度限制，比如
width: 200px或max-width: 100%；flex 或 grid 容器中尤其容易漏掉这个
多行文本溢出用 -webkit-line-clamp 而不是 text-overflow
text-overflow 原生只支持单行。想实现“最多两行，超出加省略号”，得用 -webkit-line-clamp —— 这是 WebKit/Blink 专属属性，目前 Chrome、Edge、Safari 都支持，Firefox 仍不支持（需 fallback）。
它必须配合 display: -webkit-box 和 -webkit-box-orient: vertical 才能生效，本质是把块元素当成弹性盒子来截行。
立即学习“前端免费学习笔记（深入）”；
