-webkit-line-clamp三件套（display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp）可纯css实现多行截断，但仅chrome/safari/edge(chromium)支持；必须配合overflow: hidden、明确宽高约束，且text-overflow: ellipsis对多行无效；firefox无原生支持，需js或降级方案。
直接用 -webkit-line-clamp 的三件套写法
能用纯 CSS 实现多行截断，-webkit-line-clamp 是目前最轻量、最可控的方案，但只在 Chrome、Safari、Edge（Chromium 内核）里有效。它不是独立属性，必须和另外两个 WebKit 专属声明一起出现：
-
display: -webkit-box—— 把元素变成弹性盒，否则-webkit-line-clamp完全被忽略 -
-webkit-box-orient: vertical—— 指定子元素垂直排列，这是行数计算的前提 -
-webkit-line-clamp: 2—— 数字填几就最多显示几行（比如3就是三行）
还必须加 overflow: hidden，否则文字会撑出来；容器得有明确宽度（max-width 或 width）和高度约束（比如 max-height 或依赖行高自动算出的高度），否则 iOS 上可能不触发截断。
text-overflow: ellipsis 为什么对多行无效
很多人误以为只要加了 text-overflow: ellipsis 就能管多行——其实它只对单行块级元素生效，且必须同时满足四个条件：
- 元素是块级（
display: block或inline-block） -
white-space: nowrap（强制不换行） overflow: hidden- 有明确宽度（
width或max-width）
一旦允许换行（比如 white-space: normal），text-overflow 就彻底失效。所以拿它去套多行场景，只会看到文字溢出或容器被撑开，不会出现省略号。
Firefox 下怎么处理多行截断
Firefox 不支持 -webkit-line-clamp，也没有标准替代属性。别指望加个 -moz- 前缀就能解决，它就是不认。实际项目中只有两个靠谱选择：
- 服务端或 JS 预截断：按字符数或像素高度动态裁剪，再手动补
…；注意保留 HTML 标签结构，避免截断在<span></span>中间 - 降级 fallback：对 Firefox 用户改用单行截断（
white-space: nowrap+text-overflow: ellipsis），或者干脆不限制行数，靠容器自然换行
第三方 JS 库（如 dotdotdot）虽能模拟，但要反复测量行高和容器尺寸，SSR 场景下不可用，且滚动时可能闪动。
响应式布局中容易漏掉的关键细节
写完 -webkit-line-clamp 发现某些设备上没效果？大概率是这些地方没对齐：
- 父容器用了
display: flex，但文本元素没加min-width: 0—— Flex 子项默认最小宽度为内容宽度，会阻止收缩和换行，导致截断逻辑失效 - 用了
white-space: pre-wrap或pre-line—— 这类值会保留原始换行符，和-webkit-box的垂直排列机制冲突 - 元素是
<span></span>且没改display——span默认是 inline，无法参与盒模型计算，必须显式设为block或-webkit-box - 中文段落里夹着长 URL 或 Base64 字符串 —— 浏览器按行高硬切，可能把链接切成两半；加
overflow-wrap: break-word可缓解，但不能保证语义完整
真正麻烦的不是代码写几行，而是你写的每一条 -webkit-line-clamp，背后都对应一个看不到省略号的 Firefox 用户，以及一段可能被截成半截的 URL。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
