Web 浏览器之间长期以来共享着各种功能。word-wrap CSS 属性是 最初来自微软的功能，并且包含在 CSS3 中。

现在可在 Firefox 3.5 中使用，此 CSS 属性允许浏览器任意地将长单词或字符字符串拆分以适应给定元素。

这有什么用呢？好吧，您是否曾经需要在一个页面上显示一个极长的 URL 或数据块？当然，URL 短网址服务有所帮助，但基本布局问题仍然存在。

考虑一下使用 data 方案 的以下 URL

data:text/html;charset=utf-8;base64,Q29uZ3JhdHVsYXRpb25zISBZb3UndmUgZm91bmQgdGhlIGhpZGRlbiBtZXNzYWdlIQ0KDQpUbyBjbGFpbSB5b3VyIHByaXplLCB2aXNpdCBodHRwOi8vZ2V0ZmlyZWZveC5jb20gdG9kYXkhDQoNCkZyZWUgYnJvd3NlciBpbiBldmVyeSBib3ghDQo%3D

在 <textarea> 中呈现时，这个巨大的 URL 表现得足够好，至少不会破坏此页面的布局。但是，除此之外，它并没有得到很好的处理。大多数浏览器都不太清楚如何处理滚动条，样式设置很麻烦，并且在可编辑字段中呈现 URL 并不是这里的目的。

或者，您可以将 URL 放入 <div> 中，并为其添加 overflow: hidden 样式，如下所示

同样，页面布局没有被破坏，但现在 URL 被截断了。那么，为什么不尝试使用 overflow: auto 样式呢？

这至少会为您提供一个滚动条

但是现在，访问您网页的访客必须滚动才能看到全部
内容，并且突出显示文本以进行复制和粘贴可能会
很麻烦。

因此，最后，这是 word-wrap: break-word 的效果

亲眼看看区别：使用上面的单选按钮在 normal（默认值）和 break-word 值之间切换。normal 值会导致 URL 超出包含的 <div>，可能会破坏此页面的布局。

另一方面，使用 word-wrap: break-word 将允许浏览器将文本强制到 <div> 的范围内，从而保留您的页面布局，并可能保留您的理智。