text-overflow: ellipsis 必须同时满足三个条件才生效：white-space: nowrap、overflow: hidden 和明确的宽度限制（如 width 或 max-width）；仅支持单行省略，多行需借助 -webkit-line-clamp 等方案。
text-overflow: ellipsis 必须配合哪些 CSS 属性才生效
text-overflow: ellipsis 单独写是没用的，它只负责“显示省略号”，但不控制“何时省略”。必须同时满足三个条件：
-
white-space: nowrap：强制单行，防止文字换行撑开容器 -
overflow: hidden：隐藏溢出内容，否则省略号不会出现（文字直接跑出去） - 元素需有**明确宽度限制**（如
width、max-width，或受父容器约束的固定尺寸）
缺任意一个，ellipsis 都不会触发。常见错误是只写了 text-overflow 和 nowrap，却忘了 overflow: hidden。
多行文字省略用 ellipsis 可行吗
原生 text-overflow: ellipsis **仅支持单行**。想实现两行或 N 行省略，不能只靠它：
- CSS 方案需组合
display: -webkit-box+-webkit-line-clamp（仅 WebKit 内核，Chrome/Safari 有效，Firefox 不支持） - 需要
overflow: hidden和word-break: break-word（或overflow-wrap: break-word）辅助断行 - 若要求全浏览器兼容，得用 JavaScript 截取字符数 + 插入
"…"，或使用line-clamp的 polyfill
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-word;
}
为什么设置了 ellipsis 还是不显示省略号
除了漏掉必要属性，还有几个隐蔽原因：
立即学习“前端免费学习笔记（深入）”；
- 父容器用了
flex且未设min-width: 0或overflow: hidden—— Flex 项默认不收缩，会撑宽容器导致子元素没机会溢出 - 元素是
inline元素（如span），而white-space: nowrap对 inline 元素生效，但overflow: hidden对非块级元素无效，需加display: inline-block或block - 字体或字号过大，导致单个字符宽度超过容器可用空间，
ellipsis无法在字符中间截断（它只在单词/字边界生效） - 中文环境里用了
word-break: keep-all或overflow-wrap: normal，可能阻止合理换行与截断
在 table / flex / grid 布局中如何安全使用
不同布局上下文对 text-overflow 的影响很大：
-
Table 单元格：默认
table-layout: auto会忽略width，应设table-layout: fixed，并给th/td明确width或max-width -
Flex 容器子项：加
min-width: 0（防 flex item 默认最小宽度为内容宽度），再配overflow: hidden -
Grid 项：确保该轨道有确定尺寸（如
grid-template-columns: 200px 1fr），避免用auto或minmax(auto, 1fr)等模糊定义
本质都是为了让「溢出判断」有明确参照 —— 浏览器得知道“超出谁”，才能决定在哪加 …。
