换行看似只是排版细节，实际决定的是阅读节奏。换行不是样式花活，而是信息被理解的路径。

CJK & non-CJK 在浏览器中的差异

先看一个中文和英文默认换行行为的对比：

中文、日文和韩文通常按字换行，这三种语言统称为 CJK。其余语言按单词换行，即 non-CJK。当单词过长时，non-CJK 语言往往会溢出容器，而不会自动换行。

通过 <wbr> 实现更好的换行控制

来看一个更典型的例子：

如果直接用 word-break: break-word，虽然能换行，但会破坏单词的可读性：

<div style="word-break: break-word">new Intl.DateTimeFormat().resolvedOptions()</div>

而如果使用 <br> 强制换行，容器宽度变化时，断行点又会变得不自然：

<div>new <br />Intl<br />.DateTime<br />Format()<br />.resolved<br />Options()</div>

这时 <wbr> 就派上用场了。它表示“可选换行点”，只有在需要时才换行：

<div>new <wbr />Intl<wbr />.DateTime<wbr />Format()<wbr />.resolved<wbr />Options()</div>

CJK 也可以用 <wbr> 吗

默认情况下，浏览器对 CJK 语言中的 <wbr> 并不生效，但可以通过 white-space: nowrap 来让 <wbr> 参与换行：

<div style="white-space: nowrap">
  这是一段<wbr />很长<wbr />很长<wbr />很长<wbr />很长<wbr />很长<wbr />很长的<wbr />文字。
</div>

结语

<wbr> 历史可以追溯到 IE 5.5，在 HTML4.01 规范中首次引入。它是一个空元素，没有属性，作用是建议浏览器在此处断行。随着 HTML5 规范明确其语义，以及现代浏览器的广泛支持，<wbr> 成为处理排版细节的实用工具。

当你需要既保持可读性又保持自适应排版时，<wbr> 往往比强制换行更优雅。