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助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。