CSS Word-Break 属性

此 CSS 属性指定了单词在行尾如何断开。它定义了换行规则。使用此属性，不适合内容框的行将在某个点断开。

语法

此属性的默认值为 normal。因此，当我们不指定任何值时，它会自动使用。

CSS Word-Break 值

• Normal：这是默认值，它只允许在连字符和空格等断点处断开单词。
• Keep-all：它以默认样式断开单词。不应用于日文/中文/韩文（CJK）文本。
• Break-all：它在字符之间插入单词断开，以防止单词溢出。当应用此值时，浏览器将在任何点断开行。如果单词太长无法容纳并出现在行尾，它可能会从中间断开单词。它不应用连字符。
• Break-word：当单词到达容器末尾时，用于断开单词。
• Initial：将属性设置为其默认值。
• Inherit：从父元素继承属性。

CSS Word-Break 示例

为了更好地理解 CSS word-break，我们将在以下示例中使用所有 CSS word-break 值。

示例 1

在此示例中，我们将使用 CSS word-break 的“normal”值。

代码

输出

示例 2

在此示例中，我们将使用 CSS word-break 的“keep-all”值。

代码

输出

示例 3

在此示例中，我们将使用 CSS word-break 的“break-all”值。

代码

输出

示例 4

在此示例中，我们将使用 CSS word-break 的“word-break”值。

代码

输出

示例 5

在此示例中，有四个容器。我们将 normal 值应用于第一个容器的内容，break-all 值应用于第二个容器的内容，keep-all 值应用于第三个容器的内容，break-word 值应用于第四个容器的内容。

代码

输出

结论

在本文中，我们学习了 CSS word-break 属性，它用于在文本到达容器末尾时进行断开或换行。您已经理解了 CSS word-break 的不同值（如 normal、keep-all、break-all 和 break-word）的示例。