本文详解为何 <wbr> 和零宽空格（ZWSP）在日文排版中默认失效，并通过 word-break: keep-all 配合软换行标记实现可控断行。
本文详解为何 `
在日文网页排版中，开发者常期望使用 <wbr> 标签或 Unicode 零宽空格（ / ）来指定理想的断行点——例如将「デバイス設定方法」合理拆分为「デバイス」+「設定方法」，而非在任意假名间生硬截断。然而实际测试会发现：这些标记在 Chrome、Firefox、Safari 中对纯日文文本完全无效，文字仍会在汉字、平假名、片假名之间任意位置断行。
根本原因在于浏览器对东亚文字的默认断行策略：根据 CSS 规范，word-break 的初始值为 normal，而对日文（以及中文、韩文）而言，该值等效于允许在几乎所有字符之间断行（包括 Kanji–Kana、Kana–Kana 之间），仅排除极少数例外（如小写假名「ゃ」「ゅ」「ょ」、叠字符号「々」、部分标点等）。此时 <wbr> 和 ZWSP 虽然存在，但因“断行机会”本身过于泛滥，它们的优先级被淹没，无法产生实际效果。
✅ 正确解法是显式启用 word-break: keep-all：
div.ja-line-control {
word-break: keep-all;
/* 可选：增强兼容性 */
overflow-wrap: break-word; /* 允许长不可断单词溢出时强制折行 */
}keep-all 会彻底禁用日文内部的默认断行机会，使浏览器仅在明确的断行提示处换行——即 <wbr>、ZWSP（）、空格、连字符（-）或标点符号处。此时你的标记才真正生效。
完整示例（修正后的 HTML）：
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Japanese Line Break Control</title>
<style>
.controlled {
font-size: 2rem;
width: 12rem;
border: 1px solid #ccc;
word-break: keep-all; /* 关键！ */
overflow-wrap: break-word;
}
</style>
</head>
<body>
<!-- ✅ 现在会按预期在「デバイス」后断行 -->
<div class="controlled">デバイス<wbr>設定方法</div>
<!-- ✅ 同样生效 -->
<div class="controlled">デバイス​設定方法</div>
<!-- ✅ 英文对比：即使无 keep-all 也有效 -->
<div class="controlled">aaaaaa<wbr>bbbbbb</div>
</body>
</html>⚠️ 注意事项：
- word-break: keep-all 对英文、数字等拉丁文本无影响，但会阻止中/日/韩文字内部断行，因此务必仅应用于明确需要精细控制的东亚文本容器，避免全局设置；
- 若文本中混有长英文单词或 URL，建议同时设置 overflow-wrap: break-word，确保极端情况下仍可安全折行；
- Safari 对 keep-all 的支持自 iOS 9.3 / macOS 10.11 起已稳定，无需额外前缀；
- 替代方案 line-break: strict（更激进的断行规则）虽存在，但兼容性较差且行为更难预测，不推荐作为首选。
总结：<wbr> 和 ZWSP 本身完全有效，问题不在标记，而在浏览器默认的宽松断行策略。通过 word-break: keep-all 收紧断行权限，再辅以语义化软换行标记，即可实现符合本地化需求的日文排版控制——这是兼顾规范性与实用性的标准实践。
