AI 外骨骼 · 跨端排版 · CSS
App 里的”购买须知“出 Bug 了：iPhone 用户看到的长句日文直接横向冲出屏幕，像脱轨的列车；Android 用户却能老老实实地自动换行。为了把火灭掉，我们和 CSS 断行属性、浏览器内核差异、以及一段没有空格的日文文案，较劲。
---
现场还原与幕后真凶
翻车现场： xxxchasenotes.vue 第 482–484 行左右的 .siz-item > span 和 .siz-item > p。
属性用错了： 原样式里写了 word-break: keep-all。本意是”CJK 字符不要在词中间断行“——但日文语义上通常没有空格，浏览器眼里整段假名和汉字就是一个超级长长长长单词。
严格规矩人
说了 keep-all 且找不到空格断点 → 宁可溢出也不换行
圆滑降级
装不下时偷偷强行掐断，送进下一行
/* 历史包袱 · xxxchasenotes.vue L482-484 */
word-break: keep-all;
/* ⚠️ 容器当时也没有 lang="ja" */盲人摸象的浏览器： 没有声明语系标签（如 lang="ja"），浏览器根本不知道这是一段日文，没法调用底层日文分词器，只能看着这串长文本干瞪眼。
现有的快速救场方案（已落地）
为了让线上用户赶紧恢复正常，我们先用两行 CSS 把这个火给灭了：
/* 快速救场：先把 iOS 不换行的 Bug 拍死 */
word-break: normal;
overflow-wrap: anywhere;- word-break: normal — 拨乱反正，中日韩字符之间该在哪断就在哪断。
- overflow-wrap: anywhere — 上一道保险：超长乱码或 URL 超出容器宽度时，浏览器会在任意字符位置”来一刀“，确保绝对不溢出。
兼容性（按 2026 年主流浏览器口径）：
- `word-break: normal`：属于基础能力，Chrome / Edge / Firefox / Safari（含 iOS Safari）均已长期支持，可视为无需兼容兜底。
- `overflow-wrap: anywhere`：现代浏览器已广泛支持；Safari / iOS Safari 从 15.4+ 开始稳定可用。若需覆盖更老 iOS（15.3 及以下），应提供降级值。
- 推荐兼容写法（先兜底，后增强）：
/* 兼容旧内核（尤其老 Safari/iOS） */
word-break: normal;
overflow-wrap: break-word; /* 老版本可用的保守兜底 */
word-wrap: break-word; /* overflow-wrap 的历史别名，可选 */
/* 现代浏览器增强：支持时覆盖为 anywhere */
overflow-wrap: anywhere;- 为什么这样写：不支持
anywhere的浏览器会忽略最后一行，保留break-word；支持anywhere的浏览器会采用更强的防溢出能力。
方案大比武：前端样式专家的挑剔视角
| # | 方案组合 | 优缺点 · 大实话 | 结论 |
|---|---|---|---|
| A | keep-all（原方案） | 老旧且危险。无空格日文面前是天然溢出定时炸弹 | 🗑️ 丢进垃圾桶 |
| B | normal + anywhere（当前落地） | 见效快，但 anywhere 在 Flex 布局下可能压成单字瀑布流 | ✅ 当前够用 |
| C | normal + break-word + line-break: loose | 现代标准解，避开 Flex 坑，日文排版更地道 | ⭐ 黄金组合 |
| D | word-break: break-word | MDN 已废弃的过时写法 | ❌ 不采用 |
| E | word-break: break-all | 英文单词经常被拦腰截断，体验粗暴 | 🚫 严禁文案区 |
| F | 后端/CMS 注入 <wbr> | 天花板级排版，但需全链路配合 | 📦 中长期储备 |
下方交互演示可在同一窄容器内切换三种断行策略，直观感受差异（方案 A 模拟 iOS WebKit 溢出效果）：
📱 窄屏容器断行对比 · 点击切换方案
方案 A · keep-all
模拟 iOS WebKit 溢出
购买须知 · 220px 窄容器
ご購入にあたっての注意事項を必ずお読みください。返品・交換についての詳細な規定はこちらをご確認ください。
← 横向溢出（模拟 WebKit + keep-all）
word-break: keep-all; /* + 无 lang */
为什么这次选了方案 B，没选看起来更完美的方案 C？
兵贵神速： 目标是低风险、快上线。方案 B 只需改 2 行代码，稳稳治好 iOS 溢出。
踩过坑，但这次没踩中： 目前 .siz-item 仍是传统块级流布局，暂时不会触发 anywhere 的 Flex 坍塌副作用。
方案 C 需要更多真机测试： line-break 在不同 iOS 版本上对日文标点的表现略有差异；为确保窄屏手机上不憋出新 Bug，需要更充裕的真机回归时间。
线上验证与留下的”小尾巴“
验证结果： iOS 日文长句已丝滑自动换行；Android 依然稳健；英文单词保持整词换行；退款表格等其他区域因样式隔离完全没受波及。
尾巴 1 · Flex 布局隐患
风险：若以后把这块重构成 Flex 且没写死宽度，anywhere 可能把文案压成”单字瀑布流“
规避：已在样式上加醒目注释：改布局时把 anywhere 换成 break-word
尾巴 2 · 极端长字符
风险：乱码或长链接会被 anywhere 生硬切断
规避：正常购买须知场景概率极低
一句话总结与未来的进化路线
本质： 老旧的 keep-all 在”没空格的日文“和”严格的 iOS 浏览器“之间擦出的一场跨端火花。最低改动成本完成救场。
样式换代
word-break: normal;
overflow-wrap: break-word;
line-break: loose;
彻底告别布局坍塌，日文排版更地道
注入语言灵魂
前端渲染时动态绑定 lang="ja" / lang="ko"
让浏览器清清楚楚知道自己读的是哪国文字，排版引擎才能发挥全部实力
只有让浏览器知道自己在读日文，它那聪明的现代排版引擎，才能发挥出全部的实力。
本文属于 AI 实用主义流派 的第 42 篇肉身实战。
发表评论
分享你的想法和反馈