.btn { min-width: 96px; padding: 0 16px; white-space: normal; }
npx playwright test button-width.spec.ts
德语站结算按钮“Zur Kasse”显示成“Zur Kas…”,同一按钮英文“Checkout”完整,移动端 320px 宽度下必现。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:按钮宽度按英文文案写死 96px,德语译文长度超出 60%。CSS 又设了 nowrap 和 overflow hidden,文字直接被裁掉。翻译交付时没有做长度约束。
围绕「译文长度溢出」排查时,命令行跑一遍比在面板里点十次有用,面板会替你做掉不少隐式操作。同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。
把这次用到的命令存进笔记,比记住结论有用,换个环境还能照着走。改完隔一天再看一次,当场正常不代表能稳住。
处理上按这个顺序:按钮改用最小宽度加内边距 不写死 px;允许换行或缩小字号 按语言配置;给译文加长度上限 超过 1.4 倍英文的退回重译;在 320px 和 375px 两个宽度下逐语言检查。
确认没问题再收工,德语按钮完整显示“Zur Kasse”,320px 宽度下没有省略号。
