如何通过Line-height实现CSS复杂排版中行高与间距的统一优化？

本文共计972个文字，预计阅读时间需要4分钟。

使用 `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，而是它在字体加载、响应式缩放、跨浏览器渲染、布局上下文切换时的隐性联动。多数“间距不一致”问题，根源不在值本身，而在它被谁继承、被谁覆盖、被哪个渲染阶段读取。