多行文本响应式高度不稳定需综合字体渲染、行高计算与容器尺寸；应基于最小行数×单行高（含padding）设min-height，或用clamp()动态适配，配合-webkit-box限制行数并重置继承样式。

多行文本在响应式布局中高度不稳定，本质是字体渲染、行高计算、父容器尺寸变化共同作用的结果。单纯靠 min-height 兜底虽简单，但容易导致留白突兀或截断，需结合语义和视觉节奏合理设置。

明确最小高度的参考基准

不能凭感觉写个 min-height: 60px。应基于实际内容推算：

• 先确定最小行数（如至少显示2行），再乘以单行高度（line-height × font-size）
• 例如：字号 16px，行高 1.5 → 单行高 24px，2 行即 48px，可设 min-height: 48px
• 若含上下 padding（如各 8px），则加总为 min-height: 64px

用 clamp() 替代固定 min-height

固定值在极端缩放下仍可能失效。clamp() 能让最小高度随视口动态调整：

• min-height: clamp(48px, 4vh, 72px); —— 最小 48px，理想值为视口高的 4%，上限 72px
• 适合标题、卡片摘要等有明确阅读预期的文本容器
• 避免用 rem 或纯百分比做下限，它们不随屏幕物理尺寸线性变化

配合 display: -webkit-box 控制行数（可选）

当必须严格限制最多显示 N 行且不溢出时，可组合使用：

• display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
• 此时 min-height 应按「3 行 + 内边距」设定，确保未截断时也有足够空间
• 注意：该方案对省略号样式控制弱，且非所有场景适用（如需全文可展开）

检查继承与重置干扰

很多“高度跳变”其实来自隐式样式：

• 父元素设置了 line-height: normal 或 font-size: medium，子元素未显式声明
• 第三方 UI 库重置了 p、div 的默认 margin，导致实际占位不可控
• 建议文本容器统一设置：margin: 0; line-height: 1.5; font-size: 1rem;，再叠加 min-height