word-wrap用于控制长单词换行，break-word值可强制断行防溢出；overflow-wrap是其标准名称，两者功能相同，推荐优先使用overflow-wrap: break-word以确保兼容与规范。
CSS中的
word-wrap属性主要用于控制当一个单词太长而无法适应其容器时，是否允许单词断开换行。简单来说，它决定了浏览器是否可以在单词内部进行断行，以防止文本溢出。
强制长单词换行，防止溢出。
word-wrap: break-word
和overflow-wrap: break-word
有什么区别？
其实，
word-wrap最初是一个非标准的属性，后来被标准化并更名为
overflow-wrap。
word-wrap: break-word和
overflow-wrap: break-word在现代浏览器中基本上是等效的，作用都是允许长单词断开并换行。
历史原因导致了两个属性的存在，但推荐使用
overflow-wrap: break-word，因为它才是标准的属性名。不过，为了兼容一些老旧的浏览器，你可能需要同时使用这两个属性：
立即学习“前端免费学习笔记（深入）”；
.container {
word-wrap: break-word; /* 兼容旧浏览器 */
overflow-wrap: break-word; /* 标准属性 */
}我个人更倾向于直接使用
overflow-wrap，毕竟它才是官方认可的。
除了break-word
，word-wrap
还有其他值吗？
有的。虽然
break-word是最常用的，但
word-wrap还有另一个值：
normal。
normal
: 这是默认值。当单词超出容器边界时，浏览器会尝试在正常的断点（例如空格、连字符）处换行。如果单词实在太长，超出容器宽度，则不会强制断开，可能会导致溢出。break-word
: 就像我们之前讨论的，强制单词在容器边界内断开。
举个例子，假设你有一个
div，宽度有限，里面包含一段很长的URL：
<div class="long-url"> https://www.example.com/very-long-path-with-many-segments-and-parameters-that-exceeds-the-container-width </div>
如果设置了
word-wrap: normal，这个URL可能会超出
div的边界。但如果设置了
word-wrap: break-word，URL就会在适当的位置断开，保持在
div内部。
在实际开发中，word-wrap
应该在哪些场景下使用？
我认为，
word-wrap在以下场景中特别有用：
- 处理用户输入的长文本：例如，用户在评论框中输入了一段没有空格的超长文本。
- 显示URL：正如上面的例子，URL通常很长，而且没有空格，容易导致溢出。
- 处理代码片段：有时，代码中的变量名或字符串可能会很长，需要强制换行。
例如，在一个博客评论系统中，你可以这样使用：
.comment-content {
word-wrap: break-word;
overflow-wrap: break-word; /* 确保兼容性 */
width: 100%; /* 或者其他合适的宽度 */
}这样，即使评论内容包含很长的单词，也能保证布局的完整性。
不过，在使用
word-wrap时，也要注意不要过度使用。如果一个单词被频繁地断开，可能会影响阅读体验。需要根据实际情况，权衡布局和可读性。
