text-overflow: ellipsis 必须同时满足四个条件才生效：块级或可设宽高元素、显式设置width/max-width、white-space: nowrap、overflow: hidden；缺一不可。
text-overflow: ellipsis 必须配合哪些样式才生效
单独写 text-overflow: ellipsis 没用，浏览器直接忽略。它只在特定布局条件下触发，缺一不可。
- 元素必须是块级（或 inline-block 等可设宽高的 display 类型），
inline元素不支持 - 必须显式设置
width或max-width（百分比、px、rem 都行） - 必须设置
white-space: nowrap，否则文本换行，没机会溢出 - 必须设置
overflow: hidden（overflow: clip也行，但兼容性差）
漏掉任意一条，ellipsis 就不会出现。常见错误是只写了 text-overflow，忘了 white-space 和 overflow 的组合约束。
单行省略和多行省略的实现方式完全不同
CSS 原生 text-overflow: ellipsis 只支持单行。想实现多行省略（比如三行后加…），不能只靠它。
- 单行：用标准四件套 ——
width+white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 多行：得用
display: -webkit-box+-webkit-line-clamp，这是 WebKit 专属方案，Firefox/Edge 原生不支持 - 现代替代方案：CSS
line-clamp已进入标准（overflow: hidden+display: clamp(1, 3, 3)不对 —— 别混淆，目前仍依赖-webkit-line-clamp）
示例（三行省略）：
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}注意：Firefox 中需额外 JS 模拟，或用 line-clamp 的实验性 polyfill。
用属性选择器精准控制不同容器的省略行为
比如只想让 class="title" 且 data-type="short" 的元素启用省略，就别全局写 .title，用属性选择器锁定更安全。
立即学习“前端免费学习笔记（深入）”；
- 避免误伤：
[data-truncate="true"]比.truncate更明确，不怕类名语义冲突 - 响应式切换：
[data-truncate~="mobile"]可配合 JS 在小屏时添加属性，比媒体查询写两套样式更灵活 - 慎用
[title]这类存在即匹配的选择器 —— 很多元素自带title属性（如<img title="..." alt="CSS如何控制文本超出部分的显示_利用ellipsis配合特定属性选择器css" >），容易意外触发
推荐写法：
[data-ellipsis="1"] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}然后 HTML 写 <div data-ellipsis="1">超长文本</div>，意图清晰，无副作用。
ellipsis 在 Flex/Grid 容器里容易失效的典型场景
Flex 项默认不收缩到 min-width: auto 以下，导致即使写了 width，父容器也可能撑开子项，使 overflow 失效。
- Flex 子项要加
min-width: 0（或overflow: hidden，后者会隐式触发） - Grid 中如果列定义是
grid-template-columns: 1fr，内容长时会拉伸，需配合minmax(0, 1fr) - 绝对定位元素脱离文档流，
width若设为100%但父容器没定宽，依然无效
最简排查法：打开 DevTools，检查目标元素的 computed width 是否如预期；如果不是，往上查父级是否“放任”了宽度扩张 —— 这比调 text-overflow 本身更容易卡住。
