text-overflow: ellipsis 仅对单行文本生效，需同时满足 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis；多行截断须用 -webkit-line-clamp 配合 display: -webkit-box 和 -webkit-box-orient: vertical。
text-overflow: ellipsis 只对单行生效
很多人写了 text-overflow: ellipsis 却没效果，第一反应是“CSS 写错了”，其实大概率是忘了前提条件：它只在单行文本中起作用。多行文本必须用其他方式（比如 -webkit-line-clamp 或 JS 截断）。
生效的三个必要条件缺一不可：
-
white-space: nowrap—— 强制不换行 -
overflow: hidden—— 隐藏溢出内容（text-overflow依赖它） -
text-overflow: ellipsis—— 触发省略号渲染
div {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}多行文本想用省略号得靠 -webkit-line-clamp
标准 CSS 没有原生多行 text-overflow，但现代浏览器（Chrome、Edge、Safari 16+、Firefox 120+）支持 -webkit-line-clamp，它是目前最稳妥的纯 CSS 多行截断方案。
注意它必须配合 display: -webkit-box 和 -webkit-box-orient: vertical 才能工作，且仅作用于块级元素（不能用于 inline 元素）：
立即学习“前端免费学习笔记（深入）”；
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示 2 行 */
overflow: hidden;
}常见失效原因：
- 父容器没有固定高度或
max-height，导致布局未收敛 - 用了
flex或grid布局但没设align-items: flex-start，盒子模型被干扰 - Firefox 旧版本（-webkit-line-clamp，需降级处理
overflow: hidden 不只是“隐藏”，它会影响交互和可访问性
overflow: hidden 看似只是视觉裁剪，但它会切断所有溢出区域的事件捕获（比如鼠标悬停、焦点进入），也会让屏幕阅读器跳过被裁掉的文字内容。
如果需要保留可访问性或交互能力，考虑替代方案：
- 用
aria-label或title属性提供完整文本（title在 hover 时显示原生提示，但移动端无效） - 监听
resize或用ResizeObserver动态判断是否溢出，再添加省略号类名 - 服务端或 JS 预计算字数 + 字宽（如用
canvas.measureText），主动截断并加…
line-height 和 font-size 会影响省略号垂直居中效果
省略号不是“画上去”的，而是真实字符（U+2026），它的基线位置由当前字体决定。当 line-height 过大或字体不一致时，省略号可能看起来“上浮”或“下沉”。
调试建议：
- 确保
line-height是无单位数值（如1.4），避免与font-size计算冲突 - 不要混用不同字体族（尤其 Web Font 加载中 fallback 字体不同），否则省略号渲染位置可能突变
- 用
vertical-align: baseline（默认值）保持一致性；若强制居中，优先调line-height匹配容器高度，而非用transform微调
真正难的不是写对这三行 CSS，而是判断什么时候不该用它——比如用户需要复制全文、支持翻译、或内容长度波动极大时，硬截断反而破坏体验。
