图解 overflow-wrap

在 CSS 中，overflow-wrap 属性指定了当一个不能被分割的字符串（比如一个长单词或 URL）超出其包含盒子的边界时如何进行换行。该属性可以确保内容不会溢出其容器，从而破坏布局的整体性。这是处理不可预见内容长度的一种方式，尤其是在响应式设计中非常有用。

有些同学可能没有听过这个属性，那你肯定听过 word-wrap，它和 overflow-wrap实际上是同一个属性。W3C 标准规定，word-wrap 是 overflow-wrap 的别名。早期的浏览器（例如 IE）对 word-wrap 支持比较好，而不支持 overflow-wrap ，而现代浏览器则不存在这个问题，大家可以放心使用。

overflow-wrap 属性可以有以下三个值：

• normal：只能在正常的单词分界处换行

  • 如果是拉丁语系（例如英文），在两个单词的空格处换行
  • 如果是CJK字符（例如中文），在任意字符处换行

• break-word：确保单词在必要的时候可以被拆分和换行，这样就不会溢出容器

  • 如果行中没有其他单词分界，则允许在任意点将不可断的单词换行。
  • 在计算最小内容大小时，不考虑这种软换行。

• anywhere：提供更灵活的断行规则，几乎允许在任何字符之间进行断行，而不仅仅是在单词之间

  • 如果行中没有其他单词分界，则允许在任意点将不可断的单词换行。
  • 在计算最小内容大小时，会考虑这种软换行。

如果单纯看定义，很难理解这个属性的作用，下面结合图文的形式为大家讲解，首先看下纯英文句子的情况：

可以看到，这三种模式的排版效果是一模一样的，都是在单词分界处换行，用户在阅读上不会存在任何障碍。那什么时候会有区别呢？当某个单词长度超过整行的宽度的时候，例如下面的场景：

由于默认行为是在单词分界处换行，但是这个单词太长了，发生了溢出，而 overflow-wrap 属性正是决定溢出行为如何表现的，默认的 normal 是不要截断，剩下的属性值（例如 break-word 或者 anywhere）则会截断，怎么截断呢？在容器边界对单词进行截断，所以就有了上面的效果。

而对于 CJK 字符（例如中文），设置 overflow-wrap 属性是无效的，因为中文中不存在「单词」的概念，在任意汉字处都能换行：

有一点需要注意，对于中英文混排的情况，如果剩余空间不够放下整个英文单词，并不会对单词进行截断，而是在单词前面的中文处换行，于是就会出现留白：

或许你已经发现，break-word 和 anywhere 在上面的案例中，排版效果始终一样，那这两个属性的区别在哪里呢？答案是：在计算最小内容宽度时。例如在配合 flex 布局的时候，就能体现出来了，我们设置 flex 容器的宽度是 200px，左右两边的都会尽量缩减到最小宽度，记住：中文是可以任意换行的，英文必须要在单词边界处换行，所以：

• 左边的最小宽度是 high 单词的宽度
• 右边的最小宽度是 moutains. 单词加上后面标点的宽度（注意，排版引擎很智能，无论是中文还是英文，都不会把标点符号放到换行的开头）

这里发生溢出的原因是：左右两边的容器都已经到是最小尺寸了。这里最小尺寸的定义是：

The smallest size a box could take that doesn’t lead to overflow that could be avoided by choosing a larger size.

即元素可以缩到的最小尺寸，而不使其内容溢出。对于文本来说，这通常意味着容器会缩小到最长单词的宽度；对于其他元素，比如图片或表格，它会缩小到最小的尺寸，内容还能不换行显示。与之对应的概念是最大尺寸，严谨的定义如下：

A box’s “ideal” size in a given axis when given infinite available space. Usually this is the smallest size the box could take in that axis while still fitting around its contents, i.e. minimizing unfilled space while avoiding overflow.

即元素能扩展到的最大尺寸，使其内容不会被挤压。对于文本内容，会使容器宽度扩展到不需要换行的最大宽度；对于图片或其他元素，它会使容器扩展到内容的自然大小。

这个时候 break-word 和 anywhere 的区别就出来了，如果给左边的元素设置为 anywhere，那么在计算其最小尺寸的时候，可以将不可断的单词（在这个案例中是 high 单词）换行，排版效果如下：

这是因为左边元素可以通过中断单词来缩小尺寸，high 不再是瓶颈，直到只剩一个汉字为止，不能再缩小了，而一个汉字宽度正好能放两个英文字母，所以 high 单词被拆成了 hi 和 gh 两段。而如果给右边的元素设置 anywhere，排版效果如下：

这是因为左侧元素已经是最小尺寸了，而右边元素可以任意缩小，因此会缩小到不超过 flex 容器的剩余空间，所以看到 mountains 单词在中间被断开了。由于没有汉字，右侧元素理论上能够缩小到的最小尺寸就是一个英文字母的宽度，我们可以通过调整左侧单词的长度（把 high 改成 veryveryhigh）来模拟这种效果：

学完 overflow-wrap，你可能会联想到另外一个 CSS 属性 word-break，它们都用于控制文本的换行行为，但它们的工作方式有所不同：

• overflow-wrap：处理正常单词或字符串在超出容器边界时的行为，以避免内容溢出其容器。它尽可能保持单词的完整性，只在必要的时候才会断开单词。
• word-break：用于指定非英语文本的换行规则，或者当你需要对英语文本进行更激进的换行策略时使用。

详细的内容会在下一篇文章中为大家介绍。