CSS如何让文字超出两行显示省略号_使用line-clamp属性限制

line-clamp仅WebKit内核支持，Firefox和IE无纯CSS方案；需同时设置display: -webkit-box、-webkit-box-orient: vertical和-webkit-line-clamp，配合overflow: hidden及合理max-height与line-height。line-clamp只在WebKit内核生效，Firefox和IE完全不支持直接写 display: -webkit-box; -webkit-line-clamp: 2; 在Chrome/Safari里能用，在Firefox里毫无反应，IE更不用提------它连 -webkit- 前缀都不认。这不是写法错，是浏览器能力边界问题。实操建议：立即学习"前端免费学习笔记（深入）"；必须搭配 display: -webkit-box 和 -webkit-box-orient: vertical，三者缺一不可元素需有明确宽度（比如 width 或父容器约束），否则 -webkit-line-clamp 不触发不能用于 inline 元素，得是 block 或 inline-blockFirefox用户只能靠 JS 模拟（比如截取字符+加"..."），没有纯CSS方案文字被截断但没显示省略号？检查 overflow 和 text-overflow常见现象：两行文字确实被卡住了，但末尾干干净净，没出现 ...。大概率是漏了 overflow: hidden 或 text-overflow: ellipsis ------注意后者只对 block 或 inline-block 的单行有效，而 line-clamp 场景下真正起作用的是 overflow: hidden。实操建议：立即学习"前端免费学习笔记（深入）"；overflow: hidden 是强制裁剪的开关，没它，文字会撑开容器或溢出text-overflow: ellipsis 在多行场景下只是"心理安慰"，实际不生效，别依赖它确保行高 line-height 合理，否则第二行底部可能被 overflow: hidden 切掉半截字line-clamp设为2却只显示一行？可能是高度或行高冲突典型错误：明明写了 -webkit-line-clamp: 2，结果只看到一行，甚至文字还换行了。根本原因是容器高度被其他样式锁死，或者 line-height 太大导致两行实际高度超出了容器可用空间，overflow: hidden 直接把第二行吞了。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。