---
title: "为了让 iOS 乖乖换行，我们和日文文案较劲"
date: 2026-07-21
description: "购买须知里的长句日文在 iPhone 上横向冲出屏幕，Android 却正常换行——根因是 PurchaseNotes.vue 里 word-break: keep-all 遇上无空格日文，再叠加容器缺少 lang=\"ja\"。本文复盘 WebKit 与 Blink 的断行双标、方案 B（normal + anywhere）快速救场，以及方案 C 的演进路线与 Flex 布局隐患。"
canonical_url: "https://yijinlee.com/articles/article-53"
tags:
  - 排障
  - CSS
  - i18n
  - Safari
  - WebKit
  - 跨端
  - 日文
  - word-break
  - Vue
topic: "AI 外骨骼"
---

METRICS: keep-all · WebKit vs Blink · PurchaseNotes.vue · 方案 B 已落地 · lang 待注入

App 里的”购买须知“出 Bug 了：iPhone 用户看到的长句日文直接横向冲出屏幕，像脱轨的列车；Android 用户却能老老实实地自动换行。为了把火灭掉，我们和 CSS 断行属性、浏览器内核差异、以及一段没有空格的日文文案，较劲。

---

#### 一、现场还原与幕后真凶

**翻车现场：** `PurchaseNotes.vue` 第 482–484 行左右的 `.siz-item > span` 和 `.siz-item > p`。

**属性用错了：** 原样式里写了 `word-break: keep-all`。本意是”CJK 字符不要在词中间断行“——但日文语义上通常没有空格，浏览器眼里整段假名和汉字就是一个**超级长长长长单词**。

```platformcompare
```

```cssbad
/* 历史包袱 · PurchaseNotes.vue L482-484 */
word-break: keep-all;
/* ⚠️ 容器当时也没有 lang="ja" */
```

**盲人摸象的浏览器：** 没有声明语系标签（如 `lang="ja"`），浏览器根本不知道这是一段日文，没法调用底层日文分词器，只能看着这串长文本干瞪眼。

---

#### 二、现有的快速救场方案（已落地）

为了让线上用户赶紧恢复正常，我们先用两行 CSS 把这个火给灭了：

```cssfix
/* 快速救场：先把 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 及以下），应提供降级值。
- **推荐兼容写法（先兜底，后增强）：**

```csscompat
/* 兼容旧内核（尤其老 Safari/iOS） */
word-break: normal;
overflow-wrap: break-word; /* 老版本可用的保守兜底 */
word-wrap: break-word; /* overflow-wrap 的历史别名，可选 */

/* 现代浏览器增强：支持时覆盖为 anywhere */
overflow-wrap: anywhere;
```

- **为什么这样写**：不支持 `anywhere` 的浏览器会忽略最后一行，保留 `break-word`；支持 `anywhere` 的浏览器会采用更强的防溢出能力。

---

#### 三、方案大比武：前端样式专家的挑剔视角

```schematable
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 溢出效果）：

```breakdemo
```

---

#### 四、为什么这次选了方案 B，没选看起来更完美的方案 C？

**兵贵神速：** 目标是低风险、快上线。方案 B 只需改 2 行代码，稳稳治好 iOS 溢出。

**踩过坑，但这次没踩中：** 目前 `.siz-item` 仍是传统块级流布局，暂时不会触发 anywhere 的 Flex 坍塌副作用。

**方案 C 需要更多真机测试：** `line-break` 在不同 iOS 版本上对日文标点的表现略有差异；为确保窄屏手机上不憋出新 Bug，需要更充裕的真机回归时间。

---

#### 五、线上验证与留下的”小尾巴“

**验证结果：** iOS 日文长句已丝滑自动换行；Android 依然稳健；英文单词保持整词换行；退款表格等其他区域因样式隔离完全没受波及。

```tailrisks
尾巴 1 · Flex 布局隐患|若以后把这块重构成 Flex 且没写死宽度，anywhere 可能把文案压成”单字瀑布流“|已在样式上加醒目注释：改布局时把 anywhere 换成 break-word
尾巴 2 · 极端长字符|乱码或长链接会被 anywhere 生硬切断|正常购买须知场景概率极低
```

---

#### 六、一句话总结与未来的进化路线

**本质：** 老旧的 `keep-all` 在”没空格的日文“和”严格的 iOS 浏览器“之间擦出的一场跨端火花。最低改动成本完成救场。

```roadmap
样式换代|word-break: normal;
overflow-wrap: break-word;
line-break: loose;|彻底告别布局坍塌，日文排版更地道
注入语言灵魂|前端渲染时动态绑定 lang="ja" / lang="ko"|让浏览器清清楚楚知道自己读的是哪国文字，排版引擎才能发挥全部实力
```

只有让浏览器知道自己在读日文，它那聪明的现代排版引擎，才能发挥出全部的实力。

## 参考文章：相关链接

- [CSS Text · CSS Text-14: Text Fragmentation / line breaking](https://www.w3.org/TR/css-text-3/#line-breaking)（权威引文）— CSS 文本换行规范，日文在 iOS 上「不听话」的标准依据。
- [MDN · word-break](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)（官方文档）— word-break / overflow-wrap 实操文档。
- [日文文案硬塞进美语环境](https://yijinlee.com/articles/article-26)（站内深度）— 日文排版事故的前序篇。
- [iOS Hybrid 导航栏高度玄学](https://yijinlee.com/articles/article-31)（站内深度）— iOS WebView 布局差异的另一面。