PAYATHON 2026

网站支付模式下二维码付款页产品名称显示不全

支付阿杰

结论

产品名称显示不全，一般不是二维码生成失败，而是付款页没有适配某些设备的字体大小、屏幕宽度或浏览器缩放比例，导致文字被截断。

先确认支付接口收到的产品名称是否完整：

  • 如果接口参数或页面 DOM 中的名称已经缺字，检查名称长度限制、字符编码和参数传递过程。
  • 如果数据完整，只是页面没有显示完整，取消固定高度和单行省略样式，让名称自动换行。
  • 如果付款页由第三方支付平台托管，商户通常无法修改页面样式。可以缩短产品名称，并向支付平台反馈兼容性问题。

原因排查

检查支付请求参数

查看创建付款链接时传入的产品名称字段，如 subject、body 或支付服务定义的同类字段，确认字段值在发送前没有被截取。

const productName = order.productName;

console.log(productName);
console.log(productName.length);

同时检查代码中是否存在主动截断名称的处理：

// 这类处理会导致名称在请求发出前就不完整
const subject = productName.substring(0, 20);

支付平台可能会限制商品名称字段的长度。具体上限应以当前支付接口的文档为准，不能只根据前端页面的显示结果判断。

检查字符编码

通过 URL 或表单传递中文名称时，需要正确编码参数，避免中文、空格、&、+ 等字符破坏请求内容。

const paymentUrl =
  `/pay?subject=${encodeURIComponent(productName)}&orderNo=${encodeURIComponent(orderNo)}`;

服务端读取参数后，不要再次解码：

String subject = request.getParameter("subject");

如果使用 JSON 提交，请确保请求和响应统一采用 UTF-8：

Content-Type: application/json; charset=UTF-8

区分数据截断和样式截断

使用浏览器开发者工具检查产品名称元素：

  • DOM 中的文字不完整，说明问题可能出在接口参数、数据库字段或服务端处理环节。
  • DOM 中的文字完整，但页面只显示了一部分，说明问题出在 CSS 布局。
  • 只有少数手机出现异常，应重点检查系统字体、浏览器缩放和窄屏适配。

常见的文字截断样式如下：

.product-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

固定高度也可能隐藏换行后的内容：

.product-name {
  height: 24px;
  overflow: hidden;
}

解决步骤

允许产品名称自动换行

如果付款页可以自行修改，可将名称区域改为自适应高度：

.product-name {
  height: auto;
  min-height: 24px;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.5;
}

如果只需要显示两行，可以限制行数，但超过两行的内容仍会被省略：

.product-name {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.5;
}

如果需要完整显示名称，就不要设置 text-overflow: ellipsis 或 -webkit-line-clamp。

配置移动端视口

确认页面包含正确的视口配置：

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, viewport-fit=cover"
>

名称容器应避免使用固定宽度：

.payment-info {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.product-name {
  max-width: 100%;
}

检查父容器

即使产品名称元素允许换行，只要父容器设置了固定高度或 overflow: hidden，内容仍可能被裁切：

.payment-card,
.payment-info {
  height: auto;
  overflow: visible;
}

修改样式时，需要检查完整的容器层级，不能只看文字元素本身。

兼容大字体和浏览器缩放

不要通过禁止用户缩放来掩盖布局问题。页面布局应能适应字体大小的变化，可以使用弹性布局，并允许子元素收缩：

.payment-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

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

.product-name {
  white-space: normal;
  overflow-wrap: anywhere;
}

调整完成后，至少测试以下情况：

  • 不同的屏幕宽度；
  • 系统默认字体和大字体；
  • 浏览器默认缩放比例和放大状态；
  • 较长的中文、英文及中英文混合名称；
  • 包含空格、连字符或连续英文字符的名称。

第三方付款页的处理方式

如果扫码后打开的是支付平台托管页面，页面布局不属于商户系统，修改本地 CSS 无法解决问题。此时可以：

  1. 确认提交给支付接口的产品名称完整，并且符合字段长度限制。
  2. 缩短产品名称，把关键信息放在前面。
  3. 将订单号、规格等次要信息放入备注或支付接口允许的其他字段。
  4. 记录出现异常的设备型号、操作系统、浏览器或支付客户端版本，并向支付平台提交截图和复现信息。

例如，可以将过长的名称：

2026年秋季高级课程培训服务第一阶段线上学习套餐

缩短为：

高级课程培训｜第一阶段

注意事项

还要检查数据库字段长度。例如使用 VARCHAR 时，需要确认字段容量足以保存完整名称，同时留意不同数据库对字符长度和字节长度的计算方式。

不要只看付款页截图就判断数据已经丢失。应依次检查原始商品名称、支付请求参数、支付平台返回内容和页面 DOM，确定名称具体在哪一层被截断。

如果问题只出现在少数用户的设备上，而接口参数和 DOM 内容都完整，可以重点排查字体放大、浏览器缩放、固定高度和父容器裁切。

备注：内容仅供参考。