line-height 设置后文字被截断，是 height 或 max-height 搞的鬼
多行文本看着被砍掉几行，不是 line-height 本身有问题，而是它和容器的 height 或 max-height 冲突了。比如设了 line-height: 1.5，但容器 height: 40px，三行字撑开需要 60px，浏览器只能硬裁。
- 优先检查父容器有没有固定
height、max-height或overflow: hidden - 如果真要限制高度，用
display: -webkit-box+-webkit-line-clamp更可靠，line-height只管行内间距，不负责截断逻辑 -
line-height是行盒（line box）的最小高度，但不会强制扩展容器；容器高度由内容盒（content box）决定，而内容盒受box-sizing影响
box-sizing: border-box 下 line-height 表现更“紧凑”？其实是误解
box-sizing 不影响 line-height 的计算方式，但它改变的是容器尺寸的归属边界。很多人发现设了 box-sizing: border-box 后文字“贴顶”或“下沉”，其实是 padding 和 border 挤占了原本留给行距的空间。
-
line-height始终作用于内容区（content area），与box-sizing无关 - 但当容器有
padding-top且box-sizing: border-box时，总高度固定，内容区变小，视觉上行距被“压缩” - 典型场景：按钮里多行文字，加了
padding又设height，结果首行文字顶到上边框——删掉height或改用min-height更稳妥
line-height 数值 vs 像素值：别在可缩放场景用 px
写成 line-height: 24px 看似精确，但用户缩放页面或系统字体变大时，行高卡死不动，很快出现重叠或过大间隙。
- 响应式/无障碍场景一律用无单位数值，如
line-height: 1.6，它会乘以当前font-size动态计算 - 只有极少数情况需固定像素值，比如 SVG 内嵌文本或 canvas 渲染对齐，且必须同步控制
font-size - 注意：无单位值是相对于元素自身的
font-size，继承时不会“叠加”，这点常被误读
Flex 容器里多行文本垂直居中失效，line-height 不是万能钥匙
给 flex item 设 line-height 想让多行文字垂直居中，基本没用——line-height 只对单行生效，多行时行盒堆叠，首行 baseline 对齐容器，其余各行按自然流排列。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：flex item 本身设
display: flex; align-items: center; justify-content: center - 或者用
vertical-align: middle+display: table-cell（兼容性差，慎用） - 如果容器高度不确定，又想靠
line-height“模拟”居中，得配合height: fit-content或min-height，但依然不推荐
