简介
在这个时代，使一个网站能够在所有设备上正确显示是非常重要的。不幸的是，尽管你尽了最大的努力去做，但你仍然可能会出现破损的布局。
破损的布局有时会发生，因为某些字太长了，无法装入其容器。当你在处理你无法控制的用户生成的内容时，就会发生内容溢出。一个典型的例子是在博客文章的评论部分。因此，你需要应用适当的样式，以防止内容溢出其容器。
你可以使用word-wrap,overflow-wrap, 或word-break CSS属性来包裹或断开那些会溢出其容器的文字。本文是关于word-wrap 、overflow-wrap 和word-break CSS属性的深入教程，以及如何使用它们来防止内容溢出，以免破坏你漂亮的布局风格。
在我们开始之前，让我们在下一节了解一下浏览器是如何包装内容的。
浏览器是如何进行内容包装的？
浏览器和其他用户代理在允许的断点上进行内容包装，这些断点被称为 "软包装 "机会。如果存在软包装的机会，浏览器会将内容包装起来，以减少内容溢出。
在英语和大多数类似的书写系统中，在没有连字符的情况下，软包装机会默认出现在词的边界。因为单词是由空格和标点组成的，这就是软包装发生的地方。
尽管软包装在英语文本中发生在空格字符处，但对于非英语书写系统来说，情况可能有所不同。有些语言不使用空格来分隔单词。因此，内容包装取决于语言或书写系统。你在html 元素上指定的lang 属性的值，主要用于确定使用的是哪种语言系统。
本文将主要关注英语语言的书写系统。
如果你处理的是长的、连续的文本，如URL或用户生成的内容，而你对这些文本的控制能力很弱或没有控制能力，那么在软包装机会的默认包装可能就不够了。
在我们详细解释这些CSS属性之前，让我们在下面的章节中看看软换行和强制换行的区别。
软换行和强制换行的区别是什么？
任何发生在软换行机会的文字换行都被称为软换行。要想在软换行机会上发生换行，你需要确保换行被启用。例如，将white-space CSS属性的值设置为nowrap ，就可以禁用换行。
另一方面，强制换行是由于明确的换行控制或标志着文本块结束或开始的换行。
Word-wrap 和overflow-wrap CSS属性
word-wrap 这个名字是overflow-wrap CSS属性的遗留名称。Word-wrap 最初是一个没有前缀的微软扩展。它不是CSS标准的一部分，尽管大多数浏览器都以word-wrap 的名字来实现它。根据CSS3规范草案，浏览器应该将word-wrap 作为overflow-wrap 属性的一个传统名称别名，以利于兼容。
大多数流行的网络浏览器的最新版本都实现了overflow-wrap 属性。
下面是CSS3规范草案中关于overflow-wrap 属性的内容。
该属性指定浏览器是否可以在行内其他不允许的点上断开，以防止在其他无法断开的字符串太长而无法放入行框时出现溢出。
如果你在一个元素上有一个white-space 属性，你需要设置它的值以允许包装，这样overflow-wrap 才有效果。
下面是overflow-wrap 属性的值。你也可以使用全局值inherit,initial,revert,unset 与overflow-wrap ，但我们在此不作介绍。
overflow-wrap: normal;
overflow-wrap: anywhere;
overflow-wrap: break-word;
在下面的小节中，我们将看一下上面概述的overflow-wrap CSS属性的值，以了解这个属性的行为。
Normal
应用normal 这个值将使浏览器使用系统默认的断行行为。因此，对于英语和其他相关的书写系统来说，断行将出现在空白处和连字符处。
.my-element{
overflow-wrap: normal;
}
在下面的图片中，文本中的一个词比它的容器长。因为其中没有软包装的机会，而且overflow-wrap 属性的值是normal ，所以这个词就溢出了它的容器。它描述了系统的默认断行行为。
Anywhere
使用值anywhere ，将在两个字符之间的任意点上破坏一个本来不可破坏的字符串。即使你在同一个元素上应用hyphens 属性，它也不会插入一个连字符。
只有当在其行中显示该词会导致溢出时，浏览器才会断开该词。如果该词在其行上显示时仍会溢出，则会在会发生溢出的地方断开该词。
当你使用anywhere ，浏览器在计算min-content 本身的尺寸时，会考虑到断字所带来的软换行机会。
.my-element{
overflow-wrap: anywhere;
}
与上一节中我们使用的overflow-wrap: normal 不同，在下面的图片中，我们使用的是overflow-wrap: anywhere 。溢出的字本来是不能被打破的，但使用overflow-wrap: anywhere ，将其分解成几块文字，以便适合其容器。
一些浏览器还不支持anywhere 这个值。下面的图片显示了根据caniuse.com的浏览器支持情况。因此，如果你打算有更高的浏览器支持，不建议在生产中使用overflow-wrap: anywhere 。
Break-word
值break-word ，在功能上与anywhere 相似。如果浏览器可以将溢出的字包到其行中而不溢出，那它就会这样做。
但是，如果该词即使在其所在行中仍然溢出其容器，浏览器就会在本来会发生溢出的地方断开它。
.my-element{
overflow-wrap: break-word;
}
下面的图片显示了当你应用overflow-wrap: break-word ，浏览器是如何断开上一节中溢出的文字的。你会注意到，下面的图片与上一小节中的图片看起来是一样的。overflow-wrap: anywhere 和overflow-wrap: break-word 的区别在于计算min-content 的内在尺寸。
anywhere 和break-word 的区别是在计算min-content 内在尺寸时明显的。对于break-word ，浏览器在计算min-content 内在尺寸时，不考虑断字所带来的软包机会，但对于anywhere ，它考虑了。
在最新版本的桌面浏览器中，break-word 这个值有很好的覆盖率。不幸的是，你不能对它们的移动对应物说同样的话。因此，使用传统的word-wrap: break-word ，而不是较新的overflow-wrap: break-word ，是比较安全的。
下图显示了根据caniuse.com提供的浏览器对overflow-wrap: break-word 的支持。你会注意到，最新版本的桌面浏览器有支持，而对一些移动浏览器的支持还不清楚。
Word-break CSS属性
Word-break 是另一个CSS属性，你可以用来指定字符之间的软包装机会。你可以使用这个属性在会发生溢出的确切位置断开一个字，并将其包裹到下一行。
以下是CSS3规范草案中关于word-break CSS属性的内容。
这个属性规定了字母之间的软包装机会，也就是说，在哪些地方断开文本行是 "正常的"，是可以允许的。它控制了浏览器可以将哪些类型的字母粘在一起，形成不可分割的 "单词"--使中日韩字符表现得像非中日韩文本，反之亦然。
下面是word-break 这个CSS属性的可能值。像overflow-wrap ，你也可以使用全局值inherit 、initial 、revert 、unset 和word-break ，但我们在此不作介绍。
word-break: normal;
word-break: break-all;
word-break: keep-all;
Break-word 也是word-break CSS属性的一个值，尽管它已经被废弃了。然而，浏览器仍然支持它，这是出于传统的原因。指定这个属性的效果与word-break: normal 和overflow-wrap: anywhere 相同。
现在我们知道了break-word 这个CSS属性及其相应的值，让我们在下面的小节中详细了解一下。
Normal
将word-break 属性的值设置为normal 将应用默认的断字规则。
.my-element{
word-break: normal;
}
下面的图片说明了当你对包含一个比其容器长的单词的文本块应用样式word-break: normal ，会发生什么。你看到的是浏览器通常的断字规则在起作用。
Break-all
对于非中文、非日文和非韩文的书写系统来说，break-all 这个值将在文本会溢出的确切位置插入一个断行符。
它不会把这个词放在自己的行上，即使这样做可以避免插入换行。
.my-element{
word-break: break-all;
}
word-break: break-all 在下面的图片中，我对一个宽度为p 的元素应用了240px 的样式，其中包含一个溢出的文本。浏览器在会发生溢出的地方插入了一个换行符，并将剩余的文字包到了下一行。
使用break-all ，可以在英语和其他相关语言系统中发生溢出的确切位置，在两个字符之间断开一个单词。然而，它不会对中文、日文和韩文（CJK）文本应用同样的行为。
它对中日韩文本不适用同样的行为，因为中日韩书写系统有自己的断点应用规则。仅仅为了避免溢出而在两个字符之间任意创建一个断行，可能会大大改变文本的整体含义。对于中日韩系统，浏览器会在允许断行的地方应用断行。
下图显示了根据caniuse.com提供的浏览器对word-break: break-word 的支持情况。尽管大多数现代网络浏览器的最新版本都支持这个值，但在一些移动浏览器中的支持情况不明。
Keep-all
如果你使用keep-all ，即使有内容溢出，浏览器也不会对中日韩文本应用断字。对于非中日韩文字系统，应用keep-all 值的效果与应用normal 的效果相同。
.my-element{
word-break: keep-all;
}
在下图中，应用word-break: keep-all 的效果与word-break: normal 相同，因为我使用的是非中日韩书写系统（英文）。
下图显示了根据caniuse.com对word-break: keep-all 的浏览器支持情况。这个值在大多数流行的桌面浏览器中都有支持。不幸的是，对于移动浏览器来说，情况并非如此。
现在我们已经看了overflow-wrap 和word-break 这两个CSS属性，这两者之间有什么区别？下面的章节将对此进行说明。
overflow-wrap 和word-break 之间有什么区别？
你可以使用CSS属性overflow-wrap 和word-break 来管理内容溢出。但是，这两个属性的处理方式是有区别的。
使用overflow-wrap ，如果整个溢出的字可以装在一行中而不溢出其容器，就会将其包裹在其行中。浏览器只有在不能在不溢出的情况下将该词放在其行中时，才会将其断开。在大多数情况下，overflow-wrap 属性或其遗留名称word-wrap 可能足以管理内容溢出。
overflow-wrap 属性相对较新，因此对浏览器的支持有限。如果你想获得更高的浏览器支持，你可以使用传统的名称word-wrap 。
另一方面，word-break 会无情地将溢出的字在两个字符之间断开，即使将它放在其行中会否定断字的需要。此外，一些书写系统（如中日韩书写系统）有严格的断字规则，浏览器在使用word-break 创建换行时要考虑到这些规则。
结论
正如上述章节所指出的，overflow-wrap 和word-break 在很多方面都很相似。你可以使用它们来进行换行控制。
overflow-wrap 这个名字是传统的word-wrap 属性的一个别名。因此，你可以交替使用这两者。然而，值得一提的是，浏览器对较新的overflow-wrap 属性的支持度仍然很低。如果你想获得接近普遍的浏览器支持，你最好使用word-wrap ，而不是overflow-wrap 。根据CSS3规范草案，浏览器和用户代理应该继续支持word-wrap ，以满足传统的原因。
如果你想管理内容溢出，overflow-wrap 或其遗留名称word-wrap 可能就足够了。
如果一个词溢出了它的容器，你也可以使用word-break ，在两个字符之间断开该词。就像overflow-wrap ，由于浏览器支持的限制，在使用word-break 时，你需要谨慎行事。
现在你知道了与这两个属性相关的行为，你可以决定在什么地方和什么时候使用它们。我错过了什么吗？请在评论区留下评论。我将很高兴更新这篇文章。
The postA complete guide to word-wrap, overflow-wrap, and word-break in CSSappeared first onLogRocket Blog.
