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 才能生效，本质是把块元素当成弹性盒子来截行。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
.clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } - 注意：不能和
white-space: nowrap共存，否则-webkit-line-clamp失效 - Firefox 用户看到的是自然折行（无省略号），如需兼容，得用 JS 截断或服务端预处理
white-space 的不同取值对溢出行为的影响
white-space 决定了空格、换行符如何处理，直接影响文本是否“有机会溢出”。不是所有值都适合配 text-overflow。
-
white-space: nowrap：空格当普通字符，不换行 → 溢出可控，适合单行省略 -
white-space: pre：保留空格和换行，但不自动换行 → 可能意外拉宽容器，慎用 -
white-space: normal（默认）：空格合并、自动换行 → 文本在边界内就折行了，根本不会触发text-overflow -
white-space: pre-wrap：保留空格和换行，同时允许自动换行 → 溢出行为复杂，一般不和ellipsis搭配
Flex 容器中 text-overflow 失效的典型原因
在 display: flex 的父容器里，子项默认不收缩（flex-shrink: 1 有效，但初始 min-width: auto 会阻止压缩），导致即使写了 white-space: nowrap 和 overflow: hidden，文本依然不省略。
关键是要让文本容器“愿意变窄”：
- 给文本容器加
min-width: 0（或min-width: fit-content），覆盖min-width: auto的默认行为 - 确保父 flex 项没设
flex: 0 0 auto或flex-grow: 0且没留足空间 - 避免在文本容器上误加
flex: 1却忘了设overflow，flex 会优先撑满空间而非截断
复杂布局里，min-width: 0 是最容易被忽略的一环。
