文本换行和断行

本指南介绍了在 CSS 中管理文本溢出的各种方法。

什么是溢出文本？

在 CSS 中，如果您有一个不可分割的字符串，例如一个非常长的单词，默认情况下它会溢出在内联方向上对其而言太小的任何容器。我们可以在下面的示例中看到这种情况：长单词正在超出其包含的框的边界。

CSS 会以这种方式显示溢出，因为执行其他操作可能会导致数据丢失。在 CSS 中，数据丢失意味着某些内容消失了。因此，overflow 的初始值为 visible，我们可以看到溢出的文本。通常最好能够看到溢出，即使它很凌乱。如果内容会消失或被裁剪（如果将 overflow 设置为 hidden 会发生这种情况），您在预览站点时可能无法发现它。凌乱的溢出至少很容易发现，在最坏的情况下，即使看起来有点奇怪，您的访问者也能看到并读取内容。

在下一个示例中，您可以看到如果将 overflow 设置为 hidden 会发生什么。

查找最小内容大小

要查找包含其内容且没有溢出的框的最小大小，请将框的 width 或 inline-size 属性设置为 min-content。

因此，使用 min-content 是溢出框的一种可能性。如果允许框增长到内容所需的最小大小，但不更大，则使用此关键字将为您提供该大小。

断开长单词

如果框需要是固定大小，或者您渴望确保长单词不会溢出，则 overflow-wrap 属性可以提供帮助。此属性将断开一个单词，一旦它太长而无法单独在一行上显示。

注意：overflow-wrap 属性的作用方式与非标准属性 word-wrap 相同。浏览器现在将 word-wrap 属性视为标准属性的别名。

可以尝试的另一个属性是 word-break。此属性将在单词溢出的位置断开单词。即使将单词放到新行上可以使其在不中断的情况下显示，它也会导致中断。

在下一个示例中，您可以比较这两个属性对同一文本字符串的影响。

如果您想防止出现较大的间隙（如果仅有足够的空间容纳字符串），或者您不希望中断发生在另一个元素之后，这可能很有用。

下面的示例中包含一个复选框和标签。假设您希望标签过长时换行，但又不希望它在复选框之后立即换行。

添加连字符

要在单词换行时添加连字符，请使用 CSS 的 hyphens 属性。使用 auto 值，浏览器可以根据其选择的规则，在适当的连字符位置自动换行。要对过程进行一些控制，请使用 manual 值，然后在字符串中插入硬换行符或软换行符。硬换行符 (‐) 将始终换行，即使不需要这样做也是如此。软换行符 (­) 仅在需要换行时才会换行。

您还可以使用 hyphenate-character 属性，在行尾（连字符换行符之前）使用您选择的字符串，而不是当前语言的默认连字符。auto 值会根据当前内容语言的排版约定选择正确的标记，以表示单词中间的换行符。

CSS 提供了额外的连字符控制：hyphenate-limit-chars 属性可用于设置允许连字符的最小单词长度，以及连字符前后字符的最小数量。

<wbr> 元素

如果您知道想要长字符串在何处换行，则还可以插入 HTML 的 <wbr> 元素。这在页面上显示长 URL 等情况下非常有用。然后，您可以添加属性，以便在易于阅读的位置换行。

在下面的示例中，文本在 <wbr> 的位置换行。

另请参阅