text-overflow: ellipsis 仅支持单行省略，因依赖 white-space: nowrap（禁换行）与多行冲突；多行省略须用 -webkit-line-clamp 配合 display: -webkit-box、-webkit-box-orient: vertical 和 overflow: hidden，且需注意兼容性与布局限制。
text-overflow: ellipsis 不能实现多行省略号显示——它只对单行生效，强行用在多行元素上，省略号根本不会出现。
为什么 text-overflow: ellipsis 在多行里完全不生效
它依赖三个硬性前提必须同时成立：white-space: nowrap、overflow: hidden、有明确的 width 或 max-width。而 white-space: nowrap 会禁止换行，天然与“多行”冲突。浏览器检测到矛盾，就静默忽略 text-overflow 声明，也不报错。
常见错误现象包括：
- 加了
text-overflow: ellipsis却没效果，连省略号都不见 - 设置了
line-height和max-height，但文本直接被裁断，末尾无… - 在 Flex 容器里套用，结果
-webkit-line-clamp失效（因display被覆盖）
真正起作用的是 -webkit-line-clamp 配合四条声明
这是当前唯一纯 CSS 的多行省略方案，Chrome/Edge/Safari 及 Firefox 125+ 均支持。关键不是“加上 text-overflow: ellipsis”，而是配齐以下四点：
立即学习“前端免费学习笔记（深入）”；
-
display: -webkit-box：必须用这个值，flex、block或grid都不行 -
-webkit-box-orient: vertical：缺了这句，-webkit-line-clamp彻底无效 -
-webkit-line-clamp: 2：写整数，不支持calc()或小数 -
overflow: hidden：不是可选，是强制要求；仅设text-overflow: ellipsis没用
示例（两行省略）：
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
兼容性与容易被忽略的细节
这个方案看着简单，实际项目中几个点极易出问题：
- Firefox 低于 125 版本不支持
-webkit-line-clamp，IE 完全无效，需 JS 回退（如比对scrollHeight和clientHeight） - 不能和
display: flex或grid混用——display: -webkit-box会覆盖父级布局，得确保外层没强制重置display - 高度不可控：字体大小、
line-height或字间距变化时，截断位置可能偏移；建议固定font-size和line-height - 中英文混排或全角标点可能导致末尾多出空白，可加
word-break: break-word辅助对齐 - 别依赖
title属性补救——移动端无 hover，屏幕阅读器也不可靠；真要展开，用「展开」按钮 + JS 切换max-height
两行是较稳妥的上限；三行以上，截断位置偏差风险明显上升，且 Firefox 125+ 才刚支持，旧环境几乎不可靠。
