标题行高突增的根源是line-height被继承为固定像素值或锁死，应改用无单位数值（如1.3）配合clamp()控制字号范围，并检查父容器是否意外设置过大line-height。
标题换行后行高突增，不是字号太大，而是 line-height 被继承或锁死在像素值上。 用无单位数值重设、配合 clamp() 控制字号范围，再检查父容器是否意外施加了 line-height，基本就能压住高度。
line-height 为什么在小屏下“突然变高”
常见现象是：桌面端看着正常，一缩到手机屏，标题两行变三行，行距也明显拉大，甚至文字被挤到容器外。根本原因不是换行本身，而是：
-
line-height写成了24px或1.2em这类依赖固定基准的值，小屏字体被系统缩放或根字号变化后，它没跟着等比缩放 - 父级（比如
.card或header）设置了line-height: 2之类的大值，被子元素继承，而标题又恰好换成了多行 -
display: flex容器里对齐用了align-items: center，但没意识到line-height仍会参与文本盒计算，导致视觉上“撑高”
必须用无单位 line-height + clamp() 组合
只改 line-height 不够，得和字号联动。否则小屏字号缩到 18px，line-height: 1.5 算出来是 27px，两行就是 54px 高——远超预期。
正确写法：
.title {
font-size: clamp(1.25rem, 4vw, 1.75rem);
line-height: 1.3;
}
-
line-height: 1.3是无单位倍数，随font-size等比缩放，不会失控 -
clamp()把字号卡在合理区间，避免小屏下字太小导致行高比例失衡（比如12px字配1.5行高就只剩18px高度，显得局促） - 别用
line-height: 1.3rem—— rem 依赖根字号，若你用的是html { font-size: calc(16px + 0.25vw); }，它反而会放大波动
flex/grid 容器里标题高度异常的排查点
如果标题嵌在 display: flex 或 display: grid 的父容器中，即使写了 line-height: 1.3，也可能被“撑高”。这不是 bug，是布局逻辑：
- 父容器设了
align-items: stretch（默认值），而标题又没设min-height，它会试图填满交叉轴空间 - 标题自身用了
flex: 1，但没配min-width: 0，导致浏览器优先拉伸而非收缩，间接抬高了行盒高度 - DevTools 里检查 computed 样式，确认
line-height最终值是不是你写的那个倍数——如果不是，大概率被某层父级样式覆盖了
真正容易被忽略的细节
换行后的高度问题，往往藏在“看不见”的继承链里。比如一个全局 body { line-height: 1.6; }，会被所有标题继承；或者某个 UI 组件库悄悄给 h1 加了 margin-bottom: 1em，在小屏下因字号缩小，这个 margin 反而占比更大，造成“看起来更高”。别只盯着 line-height 本身，要顺着 computed 样式一层层往上翻，直到找到那个意外施加了大行高的父选择器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
