text-overflow: ellipsis本身不触发截断，必须配合white-space: nowrap和overflow: hidden才能生效；它原生仅支持单行省略，多行需用-webkit-line-clamp等方案且兼容性有限。
text-overflow 本身不生效，必须配合 white-space: nowrap 和 overflow: hidden 才能触发省略效果。
为什么单设 text-overflow: ellipsis 没反应
这是最常踩的坑：text-overflow 只是“告诉浏览器：当文字被截断时，用省略号代替”，但它不管“要不要截断”——那是 overflow 和 white-space 的事。
-
overflow: visible（默认值）→ 文字直接撑出容器，text-overflow完全不触发 -
white-space: normal（默认值）→ 文字自动换行，不会溢出，也就没机会截断 - 缺任意一个：
overflow: hidden或white-space: nowrap，text-overflow: ellipsis都静默失效
text-overflow 在单行和多行场景下的区别
它原生只支持单行省略。想实现多行省略（比如“显示前两行，后面用…”，即常说的 -webkit-line-clamp），不能只靠 text-overflow，得组合其他 CSS 属性，且有兼容性限制。
- 单行：可靠、通用，只需三件套：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 多行：需用
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: 2，但text-overflow: ellipsis在这里只是辅助，真正截断逻辑由-webkit-line-clamp控制 - 注意：
-webkit-line-clamp是非标准属性，Firefox 不支持；若需跨浏览器多行省略，得用 JS 方案（如计算高度+截断字符串）或服务端预处理
常见错误写法与修复示例
下面这段代码在 Chrome 看似有效，但在 Safari 或旧版 Edge 可能不显示省略号：
.title {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
问题在于漏了 white-space: nowrap。正确写法：
.title {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
- 如果容器是弹性布局（
display: flex），子元素默认min-width: auto，可能撑宽导致不截断，需加min-width: 0或overflow: hidden到子元素上 - 使用
text-overflow: "→"自定义符号时，注意引号必须是英文双引号，且仅部分浏览器支持（Chrome ≥ 84，Firefox ≥ 91） - 中英文混排时，
ellipsis位置可能因字体度量差异偏移，无法精确控制，别指望像素级对齐
真正难的不是写对这三行 CSS，而是意识到：只要文字没“被强制不换行 + 被强制隐藏”，text-overflow 就只是个摆设。多行截断更得接受浏览器能力边界——该用 JS 的时候，别硬套 CSS。
