单行文本截断显示省略号必须同时满足四个条件：明确宽度（width或max-width）、white-space: nowrap、overflow: hidden、text-overflow: ellipsis，且四者须作用于同一元素；缺一不可。
单行截断必须同时设置 width 和 white-space: nowrap
缺一不可。没有 width（或 max-width），text-overflow: ellipsis 完全不生效；没有 white-space: nowrap，文本会自动换行，溢出逻辑失效。
常见错误现象：
— 文本明明很长，但没出现省略号
— 省略号出现在第一行末尾，但第二行还显示了剩余内容
— 在 Flex 或 Grid 容器里加了 text-overflow 却毫无反应（往往是父容器未设宽，或子元素被拉伸）
-
width必须是明确值：可以是200px、50%、max-width: 12rem，但不能是width: auto或依赖内容撑开的尺寸 -
white-space: nowrap要作用在文本所在元素上，不是父容器——例如<p class="title">上设，而不是外层<div> -
overflow: hidden和text-overflow: ellipsis必须和前两者写在同一选择器里，顺序无关，但缺一不可
示例（正确）：
.title {
width: 240px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
为什么 text-overflow: ellipsis 依赖 overflow: hidden
text-overflow 不是一个独立的“裁剪”属性，它只是告诉浏览器：当文本因 overflow: hidden 被裁剪时，用什么符号替代被裁掉的部分。如果没设 overflow: hidden，文本根本不会被裁，自然也轮不到省略号出场。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
— 把 overflow: hidden 错误地写在父级 div 上，而文本在子 <span> 里 → 父级隐藏的是整个子元素框，不是文本流本身
— 使用 overflow: clip（CSS Overflow Level 4 新增）→ 当前所有浏览器都不支持 text-overflow 与之配合，仍需 hidden
- IE 需额外加
-ms-text-overflow: ellipsis（仅 IE8–11，现代项目可忽略） -
text-overflow的其他值如clip或自定义字符串（"…"）极少用，且兼容性更差，不建议替代ellipsis
Flex/Grid 容器中单行截断失效的典型原因
Flex 项目默认 min-width: auto，会阻止 width 生效；Grid 列轨道若未显式约束，也会让子元素无视 width。
解决方式不是去掉 Flex/Grid，而是加一层控制：
- 对 Flex 子项加
min-width: 0（或overflow: hidden，后者更常用） - 对 Grid 子项加
align-self: start+min-width: 0，或直接设grid-template-columns: minmax(0, 1fr)) - 更稳妥的做法：把要截断的文本再包一层
<span>，样式全写在这层上
例如：
<div style="display: flex">
<span style="min-width: 0">
<span class="truncate">超长标题超长标题超长标题</span>
</span>
</div>
其中 .truncate 就是标准四件套：width、white-space: nowrap、overflow: hidden、text-overflow: ellipsis。
响应式场景下用 max-width 替代 width 更安全
固定 width: 200px 在小屏上可能过宽，在大屏上又太窄。用 max-width 能让容器在有空间时尽量展示更多文字，空间不足时才触发截断。
注意点：
— max-width 必须配合 white-space: nowrap 才有效，只设 max-width 不设 nowrap 会导致换行而非截断
— 若父容器使用 fit-content 或 inline-block，max-width 可能被忽略，此时应回退到显式 width 或用 flex-basis 控制
- 推荐组合：
max-width: 100%; width: fit-content;→ 兼容老浏览器，且在多数布局中表现稳定 - 移动端慎用
em/rem做width，字体缩放可能导致截断位置突变；ch单位（如width: 20ch）更贴近字符数逻辑，但支持度有限（Chrome 60+，Firefox 74+）
真正麻烦的从来不是写对这四行 CSS，而是搞清它在哪一层生效、被谁覆盖、又被哪个 layout 模式悄悄绕过。每次失效，优先查这三样：width 是否真生效、white-space 是否在文本节点、overflow 是否写在了错误的元素上。
