line-height必须是明确可转为像素的固定值（如1.4em、22px），不能用normal或150%等相对值，否则calc(3 * line-height)会失效；推荐使用css变量--lh统一管理。
line-height 必须是固定值，不能用 normal 或百分比
浏览器无法根据 normal 或 150% 这类相对值算出像素高度，导致 max-height: calc(3 * line-height) 失效。实际计算时，line-height 得是 1.4em、20px 这种明确可转为像素的值。
常见错误现象：line-height: 1.5（无单位）在某些字体下会放大行距，但 calc() 里无法直接参与运算；设成 line-height: 150% 后，calc(3 * 150%) 不合法，CSS 解析失败。
- 推荐写法：
line-height: 1.4em或line-height: 22px - 用 CSS 变量更可控：
--lh: 1.4em，然后line-height: var(--lh)、max-height: calc(3 * var(--lh)) - 避免混用单位：比如
line-height: 1.4em却在 calc 中写calc(3 * 1.4rem)，单位不一致会出错
-webkit-line-clamp 的 height 计算和 display: -webkit-box 的关系
-webkit-line-clamp 本身不控制高度，它只告诉浏览器“最多显示 N 行”，真正起裁剪作用的是 overflow: hidden 和容器的盒模型约束。而 display: -webkit-box + -webkit-box-orient: vertical 是触发 -webkit-line-clamp 生效的必要条件——缺一不可。
容易踩的坑：-webkit-line-clamp: 2 却漏了 -webkit-box-orient: vertical，整个截断逻辑就失效；或者用了 display: flex 替代 display: -webkit-box，属性直接被忽略。
- 必须同时存在：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N、overflow: hidden -
width必须显式设置（哪怕width: 100%），否则可能单行就截断 - 不要给容器设
height，否则会挤压行高，破坏截断位置
Firefox / Safari / Edge 中多行截断的兼容性落差
-webkit-line-clamp 在 Firefox 68+ 已支持（无需前缀），Safari 10+、Edge 79+ 也支持，但旧版 Safari（-webkit- 前缀方案会完全失效。
此时只能降级为「高度计算法」：用 line-height × 行数 算出 max-height，再配 overflow: hidden。这个方案所有现代浏览器都认，且不依赖前缀。
- Firefox 67 及更早：无视
-webkit-line-clamp，文本照常溢出 - Safari 9：只支持带前缀的写法，且必须配合
display: -webkit-box - Chrome 120+：支持无前缀
line-clamp（已进入 CSS Overflow Module Level 4 草案），但生产环境仍建议保留前缀
为什么 max-height 比 height 更安全？
设 height 会让容器强制撑满指定像素，一旦内容行高因字体、字号变化浮动，就容易出现顶部留白或底部裁切不齐；而 max-height 是上限，只要内容没超，就不会压缩布局，视觉更稳定。
实操中，max-height: calc(3 * 1.4em) 比 height: calc(3 * 1.4em) 更常用，尤其当文本可能少于 3 行时——它不会把两行文本硬拉成三行那么高。
- 始终搭配
overflow: hidden，否则max-height不触发裁剪 - 如果父容器有 padding 或 border，记得在 calc 中预留空间，或用
box-sizing: border-box - 避免在同一个元素上同时设
height和max-height，后者会被前者压制
精确控制高度的关键，在于把行高当作一个可测量、可复用的原子单位，而不是凭感觉估算。很多问题其实不是 CSS 不够用，而是 line-height 没写死、max-height 没配对、或者忘了 overflow: hidden 这个最终闸门。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
