核心是“在哪断才合理”：长数字优先在逻辑分隔符（如-、T、:、字母数字交界）处用<wbr>断；英文单词优先保语义，无自然分隔时用overflow-wrap: break-word兜底，配合min-width: 0（flex/grid中）和white-space: normal生效。
窄屏下长数字和英文单词撑破容器，核心不是“能不能断”，而是“在哪断才合理”。关键要区分内容类型：长数字（如ID、时间戳）适合在逻辑分隔符处断；英文单词则优先保语义，只在必要时才内部折行。
长数字的断行策略
长数字串本身无自然空格，浏览器默认不换行。但多数场景下，它其实自带语义分隔点：
-
时间戳：2026-09-05T12:31:45Z → 可在
-、T、:后加<wbr>，如2026-<wbr>09-<wbr>05T<wbr>12:<wbr>31:<wbr>45Z</wbr></wbr></wbr></wbr></wbr> -
ID或序列号：abc12345678901234567890 → 数字与字母交界是安全断点，如
abc<wbr>1234567890<wbr>1234567890</wbr></wbr> -
纯数字（如手机号、卡号）：建议用空格或连字符人工分组（
138 1234 5678），比强制断行更可靠；若必须保留无空格格式，配合overflow-wrap: break-word+max-width让浏览器兜底处理
英文单词的断行原则
普通英文单词（如 internationalization）不该随意劈开，否则影响可读性。正确做法是分层控制：
-
优先靠自然断点：URL、路径、变量名等含斜杠
/、点.、下划线_、连字符-的，用<wbr>插在这些符号后，例如https://api.<wbr>example.<wbr>com/<wbr>v2/<wbr>users</wbr></wbr></wbr></wbr> -
驼峰命名词：在大写字母前插入
<wbr>，如getUser<wbr>Data<wbr>From<wbr>API</wbr></wbr></wbr>（不是getU<wbr>serData</wbr>） -
纯单词超长且无标点：不推荐手动插
<wbr>，应交由 CSS 控制——设overflow-wrap: break-word，浏览器会在万不得已时按音节或字形边界折行，比暴力切分更稳妥
必须配套的 CSS 规则
<wbr> 和 CSS 属性是协作关系，缺一不可：
-
容器要有宽度约束：比如
max-width: 100vw或width: 100%，否则浏览器无法判断是否“溢出” -
启用换行上下文：确保
white-space: normal（默认值，但容易被按钮、表格单元格等覆盖） -
开启兜底断行：写
overflow-wrap: break-word（兼容旧版可双写word-wrap: break-word） -
避开干扰项：禁用
white-space: nowrap；若在 flex/grid 容器中，给文本元素加min-width: 0防止被min-width: auto锁死
中英混排里的特殊处理
中文段落里夹着英文长串（如“订单号：ORD12345678901234567890”），单靠 overflow-wrap 常无效——因为中文本身可逐字换行，浏览器认为“已有断点”，就不触发英文部分的兜底逻辑。
此时需组合使用：
-
word-break: keep-all：防止中文被劈开（iOS 12 以下加-webkit-word-break: keep-all兼容） -
overflow-wrap: break-word：让英文长串在真正撑满时才断 - 避免对整段中文滥用
keep-all，否则会变成一行超长文本直接溢出
