CSS Wrap

本文将介绍 CSS 换行。CSS 中的换行属性用于在容器内换行文本或元素。

有多种 CSS 换行属性，如下所示：

Flex-wrap

用于定义弹性项是应该换行还是不换行。

语法

上面的语法中的 flex-wrap 是 CSS 属性，该属性的值可以是 wrap、nowrap、wrap-reverse、initial 和 inherit。下面将讨论这些值：

• Wrap：用于描述当需要时，弹性项换行。
• nowrap：用于描述弹性项不换行。这是默认值。
• Wrap-reverse：用于描述当需要时，弹性项按反向顺序换行。
• Initial：用于定义默认值。
• Inherit：用于继承父元素的属性。

注意：元素必须是灵活的；只有这样，“flex-wrap” CSS 属性才会显示其效果，这意味着元素的“display” CSS 属性必须设置为 flex。

演示

让我们通过演示来理解 flex-wrap 属性。

我们将 flex-wrap 设置为 wrap、nowrap、wrap-reverse、initial 和 inherit。

代码

输出

我们可以看到应用了 flex-wrap 属性的输出。

Word-wrap

当容器溢出时，用于断开长单词或防止断开长单词。

语法

上面的语法中的 word-wrap 是 CSS 属性，该属性的值可以是 break-word、normal、initial 和 inherit。下面将描述这些值：

• Break-word：当容器溢出时，用于断开长单词。
• Normal：此值用于停止断开长单词，这是默认值。
• Initial：用于设置默认值。
• Inherit：用于继承父元素的属性。

演示

让我们通过演示来理解 word-wrap 属性。

我们将 word-wrap 设置为 normal、break-word、initial 和 inherit。

代码

输出

我们可以看到应用了 word-wrap 属性的输出。当 word-wrap 属性设置为 normal、initial 或 inherit 时，段落 1、段落 3 和段落 4 显示单词溢出容器。段落 2 在 word-wrap 属性设置为 break-word 时显示长单词的断开。

Overflow-wrap

当容器溢出时，用于防止或断开换行。

语法

上面的语法中的 overflow-wrap 是 CSS 属性，该属性的值可以是 normal、break-word、anywhere、initial 和 inherit。下面将讨论这些值：

• Normal：此值用于让容器溢出，因此它不会断开长单词，这是默认值。
• Break-word：当容器溢出时，它仅用于断开长单词。
• Anywhere：当容器溢出时，此值会断开长单词。
• Initial：用于设置默认值。
• Inherit：用于继承父元素的属性。

图解

让我们通过图示来理解 overflow-wrap 属性。

我们将 overflow-wrap 设置为 normal 和 break-word。

代码

输出

我们可以看到应用了 overflow-wrap 属性的输出。段落 1 由于 overflow-wrap 属性设置为 normal 而显示单词溢出容器，段落 2 由于 overflow-wrap 属性设置为 break-word 而显示长单词的断开。

浏览器支持

以下是支持 CSS 换行属性的浏览器：

• 谷歌浏览器
• Safari
• Opera
• Microsoft Edge
• 火狐

结论

本文我们已经介绍了 CSS 换行。我们已经看到了各种 CSS 换行属性。

• Flex-wrap 属性：当容器溢出时，用于换行弹性元素。
• Word-wrap 属性：当容器溢出时，用于换行长单词。
• Overflow-wrap 属性：当容器溢出时，用于换行长单词并断开换行。