订单号二十位不换行 列表卡片被撑破到屏幕外

.order-no {
  overflow-wrap: anywhere;
  font-family: ui-monospace, monospace;
}
.cell { min-width: 0; }

列表里放了一列二十位的订单号，卡片右边缘被顶出容器，手机上整页能左右拖，控制台量出来内容宽 438 像素，容器只有 343。先别急着动参数，把报错原文和时间点记下来，顺序反了容易白折腾。

原因不复杂，连续数字被浏览器当成一个不可断的词，默认的断行规则不在数字中间下刀，容器又没有限制宽度。flex 子项还有 min-width: auto，内容多宽它就多宽，撑破父级。

这次卡住的地方就在「长数字换行」这一环，单独把它拎出来验证，别和其他改动混在同一次发布里。备份不是备了就行，恢复一次才算数，很多备份文件打开才发现是空的。

处理上按这个顺序：给订单号单独加 overflow-wrap: anywhere，允许在任意位置断开；flex 布局里的文字容器补 min-width: 0，否则它的最小宽度跟着内容走；需要完整显示时改成可复制的小字号，或者中间加省略号，别硬撑。

改完只确认一件事：375 宽的手机上卡片不再溢出，订单号折成两行，页面不能左右拖动。