overflow-wrap

CSS 中的 overflow-wrap 属性允许您指定浏览器可以在目标元素内部的文本行中，在一个原本无法断开的地方断开一行文本，并将其分成多行。 这有助于避免过长的文本字符串由于溢出而导致布局问题。

.example {
  overflow-wrap: break-word;
}

语法

overflow-wrap = 
  normal      |
  break-word  |
  anywhere    

• 初始值： normal
• 应用于： 非替换内联元素
• 继承： 是
• 计算值： 如指定
• 动画类型： 离散

值

• normal: 默认值。 浏览器将根据正常的换行规则断行。 单词或不间断字符串不会断开，即使它们溢出容器。
• break-word: 太大而无法容纳在容器内的单词或字符串将在任意位置断开，以强制换行。 即使使用 hyphens 属性，也不会插入连字符。
• inherit: 目标元素必须继承其直接父元素上定义的 overflow-wrap 属性的值。

下面的演示有一个切换按钮，允许您在 normal 和 break-word 之间切换。

为了演示 overflow-wrap 试图解决的问题，演示使用了一个 异常长的单词，它位于一个相对较小的容器中。 当您将 break-word 切换为打开时，该单词会被打断以适应可用的小空间，就好像该单词是多个单词一样。

一串非换行空格字符 ( ) 将以相同的方式处理，并且也会在适当的位置断开。

overflow-wrap 在应用于包含未审核的用户生成内容（如评论部分）的元素时非常有用。 这可以防止长 URL 和其他不间断文本字符串（例如，破坏行为）破坏网页的布局。

与 word-break 属性的相似之处

overflow-wrap 和 word-break 的行为非常相似，可以用来解决类似的问题。 CSS 规范中解释了它们之间差异的基本总结

• overflow-wrap 通常用于避免由于长字符串导致的布局问题，这些字符串会导致文本流出容器之外。
• word-break 指定了在通常与汉语、日语和韩语 (CJK) 等语言相关的字母之间进行软换行的机会。

在描述了如何将 word-break 用于 CJK 内容的示例之后，规范中说：“仅在溢出情况下启用其他断开机会，请参阅 overflow-wrap“。

由此，我们可以推断，word-break 最适合与非英语内容一起使用，这些内容需要特定的断词规则，并且可能与英语内容交织在一起，而 overflow-wrap 应该用于避免由于长字符串导致的布局问题，无论使用哪种语言。

历史上的 word-wrap 属性

overflow-wrap 是其前身 word-wrap 属性的标准名称。 word-wrap 最初是 Internet Explorer 专有的功能，后来在所有浏览器中都得到了支持，尽管它不是标准。

word-wrap 接受与 overflow-wrap 相同的值，并且行为相同。 规范中说，浏览器“必须将 word-wrap 视为 overflow-wrap 属性的替代名称，就好像它是 overflow-wrap 的简写一样”。 此外，所有用户代理都必须出于遗留原因无限期地支持 word-wrap。

只要验证器设置为针对 CSS3 或更高版本进行测试（目前为默认设置），overflow-wrap 和 word-wrap 都将通过 CSS 验证。

浏览器支持

更多信息

• CSS 文本模块级别 3 规范 (W3C)
• 处理长单词和 URL (CSS-Tricks)
• Word-Wrap：适用于所有浏览器的 CSS3 属性 (Louis Lazaris)
• word-break 与 overflow-wrap (Stack Overflow)
• 如何使用 CSS 阻止换行 (DigitalOcean)

相关