多行文本响应式高度不稳定需综合字体渲染、行高计算与容器尺寸；应基于最小行数×单行高（含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
