word-break

CSS 中的 word-break 属性可用于更改换行符的出现位置。通常，文本中的换行符只能出现在某些空格处，例如空格或连字符处。

在下面的示例中，我们可以将 word-break 设置在字母之间。

.element {
  word-break: break-all;
}

如果我们将文本的宽度设置为一个 em，则单词将按每个字母断行。

查看 CodePen 上 CSS-Tricks 的作品 使用 word-break 设置文本垂直对齐 (@css-tricks)。

此值通常用于用户生成内容的地方，以确保长字符串不会破坏布局。一个非常常见的例子是复制粘贴的长 URL。如果该 URL 没有连字符，它可能会超出父级框并看起来不好，或者更糟糕的是，导致布局问题。

查看 CodePen 上 CSS-Tricks 的作品 使用 word-break 修复链接 (@css-tricks)。

值

• normal：使用断词的默认规则。
• break-all：任何单词/字母都可以换行。
• keep-all：对于中文、日文和韩文文本，单词不会被拆分。否则，这与 normal 相同。

此属性也经常与 连字符 属性一起使用，以便在换行时插入连字符，如同书籍中的标准做法。

完整的用法，带必要的供应商前缀，如下所示：

 -ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for WebKit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

如果您有一个包含大量用户生成内容的网站，则在通用选择器上使用这些属性可能很有用。但请注意，在标题和预格式化文本 () 上使用它们可能会显得奇怪。

).

相关

• overflow-wrap
• 连字符
• white-space
• 处理长单词和 URL

浏览器支持

Safari 和 iOS 支持 break-all 值，但不支持 keep-all。