规范文本重叠和换行

默认情况下，文本换行仅在特定情况下发生，例如当有空格或破折号时。对于超出其容器元素的长字符串或一系列字符（例如 URL），这会导致设计和排列方面的挑战。

通过使用分词、换行和溢出换行功能，您可以控制文本在元素内的断句和换行方式。这可提高不同设备尺寸和方向的可读性，确保文本根据特定语言的要求适当换行，从而促进您网站上的无缝多语言支持。

在本教程中，您将获得以下知识：

1. 分词的应用
2. 换行的使用
3. 文字换行的实现
4. 常见问题 (FAQ)

如何应用分词

利用分词（“word-break” CSS 属性）可以修改默认的换行行为，并指示文本中应在何处换行，否则可能会溢出。可以使用分词来避免在包含复合词的内容中出现不合适的换行，或符合特定语言的规定并确保正确的视觉呈现，从而增强国际用户体验。

断字选项有三种：

• 普通的 – 默认设置遵循标准的断字规则（即在空格或连字符处断字）
• 打破全部 – 为防止溢出，任何单词或字符都可以换到下一行（中文/日文/韩文除外）
• 保留全部 – 对于中文、日文和韩文 (CJK) 文本，即使内容溢出，单词仍保持完整。非 CJK 文本的行为与 普通的

专家提示： 要进一步了解 word-break 属性并预览这些选项，请访问 MDN 网站 docs.

如何建立分词

在配置分词之前，需要向画布引入文本组件（例如，富文本、段落等）。

要配置单词分隔符：

1. 在画布上突出显示文本组件
2. 导航至 样式面板 > 排版 > 更多类型选项 > 打破
3. 从中选择一个分词选项 单词 下拉菜单（例如，正常、全部中断或全部保留）

与其他样式属性类似，您可以将单词中断应用于父元素或断点，并在子元素或不同的断点上覆盖它。

笔记： 为了防止您发布的网站出现意外行为，请记住删除所有存在的自定义单词中断 CSS。

如何利用换行符

Webflow 中的换行（在 CSS 中称为“white-space”属性）控制空白字符（即表示其他字符之间的水平或垂直空间的字符）和换行符（即表示换行符的空白字符）的处理，确定文本是否换行或溢出。

有六种换行选项：

• 普通的 – 默认值，根据需要压缩空格序列并将文本换行到下一行
• 无包装 – 与 Normal 类似地压缩空格，但即使文本超出空格，文本仍保持在一行上而不换行
• 预 – 保留空格和换行符，精确显示与 HTML 源代码相同的文本
• 预包装 – 保留空格，同时允许文本根据需要换行到下一行
• 前线 – 压缩空格、保留换行符并允许文本根据需要换行
• 空间 – 维护空格序列，在任何时候启用文本换行，并保留尾随空格

专家提示： 要深入了解 white-space 属性并预览这些变化，请参阅 MDN 网站 docs.

如何配置换行符

在设置换行符之前，向画布引入文本元素（例如，富文本、段落等）。

要配置换行符：

1. 选择画布上的文本元素
2. 访问 样式面板 > 排版 > 更多类型选项 > 打破
3. 从中选择一个换行选项 线 下拉菜单（例如，正常、不换行、预换行、预换行、预行或空格）

与其他样式属性一样，您可以将换行符应用于父元素或断点，并在子元素或不同的断点上进行修改。

笔记： 为了避免发布的网站出现意外行为，请确保删除所有自定义空白 CSS。

如何应用文字换行

文本换行（“overflow-wrap” CSS 属性）使您能够确定单词超出其容器宽度时的换行方式，确保单词在容器内最近合适的点处换行，从而保持设计的完整性和美观性。

有三种包装选项：

• 普通的 – 默认设置遵循标准断行规则（即在单词空格或连字符处断行）
• 任何地方 – 为防止溢出，如果行中没有其他可用的断点，则可以在任何位置断掉一系列原本不可断掉的字符（例如 URL 或长单词）
• 断词 – 功能类似于 任何地方 选项，如果行中没有其他可接受的断点，则可以在任意点处断开通常不可断开的单词

专家提示： 要了解有关 overflow-wrap 属性的更多见解并预览这些选项，请访问 MDN 网站 docs.

如何配置包装行为

在设置换行行为之前，请先向画布添加文本元素（例如，富文本、段落等）。

要配置包装行为：

1. 选择画布上的文本元素
2. 访问 样式面板 > 排版 > 更多类型选项 > 裹
3. 选择换行选项（例如，正常、任意位置或断词）

与其他样式属性类似，您可以将包装应用于父元素或断点，并在子元素或不同的断点上进行修改。

笔记： 为了防止您发布的网站出现意外行为，请确保删除所有自定义 overflow-wrap CSS。

常问问题

断字和断行有什么区别？

分词和换行都会影响页面上的文本显示。换行决定了如何管理空白字符，以及文本是否溢出或换行。分词控制文本中的单词碎片和换行。分词对于具有特定分词规则的 URL 或语言（例如中文、日语和韩语）特别有用。

为什么“break-word”不能用作分词选项？

根据 CSS 规范，“word-break: break-word” 已被弃用，取而代之的是“overflow-wrap: break-word”。但是，您可以使用“break-word”进行换行。