如何通过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 就不会触发。