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

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

中文、日文和韩文都是按照字来换行的，这三种语言统称为 CJK（Chinese, Japanese, Korean），而其余的语言则统称为 non-CJK。

non-CJK 语言的换行规则是按照单词来换行的，上述第三个例子中单词超长的情况下，单词就会溢出容器，而不会换行。

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

在了解 CJK 和 non-CJK 在浏览器中默认换行行为的差异后，我们再来看看下面这个例子：

你会发现这里的英语单词溢出了容器，这就是符合 non-CJK 语言按照单词换行的规则，如果一个单词超长，那它是不会自动换行的。

到这里，熟悉 CSS 的开发者会想到使用 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> 标签出场了，我们在单词中插入 <wbr> 标签，就可以实现更好的换行控制：

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

CJK 也可以通过 <wbr> 标签实现换行

上面的例子中，我们使用 <wbr> 标签实现了单词换行，那么 CJK 语言能否也使用 <wbr> 标签实现换行呢？

很遗憾，浏览器默认下 <wbr> 标签对 CJK 也是无效的，但我们可以额外为 CJK 语言添加white-space: nowrap样式实现换行：

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

结语

<wbr> 标签的历史可以追溯到 IE 5.5 被首次实现，随后在 HTML 4.01 规范中首次引入了 <wbr> 标签。它被定义为一个空元素，没有任何属性。它的作用是在需要换行时，向浏览器提供一个建议的换行位置。

然而，早期的浏览器对 <wbr> 标签的支持不一致，而且很少有开发者在实际应用中使用它。由于缺乏广泛的支持和实际应用的需求，<wbr> 标签在一段时间内没有得到广泛关注。

后来 HTML5 规范进一步明确了 <wbr> 标签的作用，加上现代的浏览器已经广泛支持 <wbr> 标签，使其成为了一种标准的、可用于指示适当断行位置的标签。

现如今 <wbr> 标签在合适的场景——诸如特定的排版和断行需求下发挥着重要的作用，它可以用于各种语言和文本内容中，以提高文本的可读性和页面的排版效果。