H5 响应式排版与长文本处理

移动 H5 中，文本长度会因语言、业务数据和用户输入大幅变化。固定宽高和单一字号在某台设备上看似整齐，换成长标题、连续数字或横屏后就可能重叠与裁剪。响应式排版需要同时管理字号、行高、可用宽度、断行和信息优先级。

一、建立清晰的文字层级

标题、正文、辅助信息和标签应使用项目设计令牌，而不是每个页面自行选择字号。

:root {
  --font-title: 24px;
  --font-body: 16px;
  --font-caption: 13px;
  --line-title: 1.3;
  --line-body: 1.6;
}

令牌表达语义，主题和不同屏幕策略可以集中调整。

二、用 clamp 设置合理范围

页面大标题可以在小屏和大屏之间平滑变化：

.page-title {
  font-size: clamp(20px, 5vw, 28px);
  line-height: 1.3;
}

正文通常不需要随屏幕无限放大。任何流式尺寸都应设置上下限，保证可读性和布局稳定。

三、行高不要固定为像素

相对行高会随字号变化：

.article-body {
  font-size: var(--font-body);
  line-height: var(--line-body);
}

固定像素行高在字号调整后可能小于文字本身，导致上下裁剪。单行按钮等特殊场景也应确保行盒与控件高度匹配。

四、弹性布局中允许文本收缩

.summary-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.summary-row__content {
  flex: 1;
  min-width: 0;
}

.summary-row__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

min-width: 0 允许弹性子项小于内容固有宽度，否则省略号可能不生效，并把右侧按钮挤出屏幕。

五、谨慎使用省略号

省略会隐藏信息，只适合用户可通过详情或其他方式查看完整内容的场景。订单状态、金额和风险提示不应仅为对齐而截断。

多行摘要可以限制行数，但需要在项目兼容范围内使用已有方案，并测试不支持相关属性的目标浏览器。

六、处理连续长字符

英文标识、数字串和用户输入可能没有自然断点。普通正文容器可以允许必要时断行：

.user-content {
  overflow-wrap: anywhere;
  word-break: normal;
}

代码、账号和可复制标识是否允许断行，要根据语义决定。断行后如果容易误读，可以改为横向滚动或分组展示。

七、数字和表格对齐

行情、金额列表需要数字列稳定。可以使用等宽数字特性，并把单位与数值分开：

.amount {
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

金额格式化应由业务格式化层完成，不用 CSS 拼接正负号或货币规则。

八、限制正文阅读宽度

大屏上正文铺满整个屏幕会让单行过长，降低阅读效率。可以设置以字符宽度为基础的上限：

.article-content {
  width: min(100%, 68ch);
  margin-inline: auto;
  padding-inline: 16px;
  box-sizing: border-box;
}

列表和数据表格不一定适合同一上限，应按内容类型处理。

九、字体加载与布局稳定

自定义字体加载前后字宽可能变化，造成标题换行和布局跳动。优先选择度量接近的后备字体，关键按钮预留足够空间。

字体文件体积也影响首屏，实际只使用少量字重时不应加载完整家族。资源加载方式由项目构建和兼容策略统一管理。

十、测试真实文本边界

至少准备：

• 一字标题和超长标题。
• 中文、英文和混排。
• 连续数字与无空格字符串。
• 大金额、负数和不同单位。
• 空内容与两行辅助说明。
• 小屏、横屏和系统显示放大。
• 从右向左语言布局。

总结

响应式排版不是全局等比缩放，而是为每类文字定义清晰层级和空间边界。字号设置合理范围，行高随文字变化，弹性子项允许收缩，再根据业务重要性选择换行或省略，页面才能在多语言与异常长数据下保持可读。