line-height用无单位数值（如1.4）可随字体缩放自适应，用像素值（如20px）则固定不变导致错位；它只影响行内内容间距，不控制容器高度，垂直居中需配合flex或height使用。
line-height 设为数值 vs 字符串，为什么换行后间距突然不对
用 line-height: 1.5 是继承计算后的倍数，而 line-height: 20px 是绝对值——子元素字体变大时，前者会按新字体重新算行高，后者死卡在 20px，导致文字被截或重叠。
- 推荐始终用无单位数值（如
1.4），除非你明确需要固定像素行高（比如等高卡片内强制对齐） - 避免混用：
font-size: 16px; line-height: 1.2→ 实际行高 19.2px；若父级设了line-height: 20px，子级又没重置，就会以 20px 为准，覆盖掉 1.2 的计算逻辑 - Flex 容器里文字垂直居中别只靠
align-items: center，得配合line-height或padding，否则多行文本会偏上
多行文本溢出（ellipsis）时 line-height 不生效的真相
text-overflow: ellipsis 要求元素必须是单行块级容器（display: block 或 inline-block），且需同时设置 white-space: nowrap 和 overflow: hidden。一旦用了 line-height，但没限制高度，ellipsis 就不会触发。
- 正确写法：
line-height: 1.4; max-height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - 注意
line-height和max-height单位要一致（都用em或都用rem），否则缩放字体时会错位 - Firefox 对
-webkit-line-clamp支持有限，真要兼容得用 JS 截断 +line-height控制总高
字体加载期间 line-height 抖动怎么稳住布局
自定义字体（比如 @font-face 引入的 Inter 或 Noto Sans）加载前用系统字体渲染，字号可能相同但字形高度不同，line-height 计算基准变了，视觉上就像段落“跳了一下”。
- 给
@font-face加font-display: swap，再用size-adjust或ascent-override对齐字体度量（现代浏览器支持） - 更稳妥的做法：用
font-size+line-height组合预留足够空间，比如系统字体 fallback 时line-height: 1.35，加载完自定义字体后设为1.4，差值由 padding 吃掉 - 不要依赖
font-weight变化来判断字体加载完成——它和line-height无关，且不可靠
Grid/Flex 布局里 line-height 为啥不控制单元格高度
line-height 只影响**行内内容**的基线间距，不是容器高度控制属性。Grid 项或 Flex 项的高度由 height、min-height、内容撑开或对齐方式决定，line-height 再大也不会让空 div 变高。
立即学习“前端免费学习笔记（深入）”；
- 想让文字在 grid cell 里垂直居中：设
display: flex; align-items: center; justify-content: center，而不是调line-height - 如果单元格有固定
height，又希望单行文字居中，line-height: 100%或等于该 height 的值才有效；但多行时必须用 flex - 慎用
vertical-align配合line-height——它只对inline或table-cell生效，现代布局中容易误用
真正难的不是设对一个 line-height，而是它在字体加载、响应式缩放、跨浏览器渲染、布局上下文切换时的隐性联动。多数“间距不一致”问题，根源不在值本身，而在它被谁继承、被谁覆盖、被哪个渲染阶段读取。
