为何Zero-width space与<wbr>对日文换行无作用？

核心原因 #

现代浏览器对日文这类东亚文本采用专属换行算法，默认允许在几乎任意字符之间换行（仅排除少数禁止换行的位置，比如特定标点前方）。这种自动换行逻辑的优先级远高于<wbr>或零宽空格（​）提供的可选换行点——因为浏览器已经有大量天然的换行位置，额外插入的换行标记自然会被忽略。

而英文等基于空格分词的语言，默认仅在空格或连字符处换行，对于无空格的长单词，<wbr>/零宽空格提供的换行点是唯一可选的换行位置，因此会正常生效。

解决办法 #

如果需要手动控制日文的换行位置，可通过CSS修改浏览器的换行规则，让<wbr>/零宽空格的换行机会生效：

给包含日文的容器添加以下CSS属性：

div {
  /* 强制浏览器仅在明确的换行点（如<wbr>、ZWSP）或空格处换行 */
  word-break: keep-all;
  /* 确保自定义换行机会被识别 */
  overflow-wrap: break-word;
}

修改后的示例代码：

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Testing Line Breaks in Japanese</title>
  <style>
    div {
      font-size: 2rem;
      width: 12rem;
      border: 1px solid;
      word-break: keep-all;
      overflow-wrap: break-word;
    }
  </style>
</head>
<body>
  <div>
    デバイス<wbr>設定方法
  </div>
  <div>
    デバイス&#8203;設定方法
  </div>
  <div>
    aaaaaa<wbr>bbbbbb
  </div>
</body>
</html>

设置后，浏览器会尊重你插入的<wbr>或零宽空格，仅在指定位置换行，而非随意拆分日文文本。

内容的提问来源于stack exchange，提问作者ddbrierton