1. Web
  2. CSS
  3. CSS 文本
  4. 换行和文本中断

换行和文本中断

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

什么是溢出文本？

在 CSS 中，如果你有一个不可断开的字符串，例如一个非常长的单词，默认情况下，如果它在行内方向上太小而无法容纳，它将溢出任何容器。我们可以在下面的示例中看到这种情况：长单词超出了其所在框的边界。

html
<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>
css
.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
}

CSS 将以这种方式显示溢出，因为做其他事情可能会导致数据丢失。在 CSS 中，数据丢失意味着你的部分内容消失了。因此，overflow 的初始值是 visible，我们可以看到溢出的文本。通常，即使它很杂乱，也能看到溢出更好。如果像将 overflow 设置为 hidden 那样，内容消失或被裁剪，你可能在预览网站时无法发现它。杂乱的溢出至少很容易发现，在最坏的情况下，即使内容看起来有点奇怪，你的访问者也能够看到并阅读它。

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

html
<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>
css
.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
  overflow: hidden;
}

查找 min-content 大小

为了找到在不发生溢出的情况下能包含其内容的最小框大小，请将框的 width 或 inline-size 属性设置为 min-content。

html
<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>
css
.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: min-content;
}

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

长单词断开

如果框需要固定大小，或者你希望确保长单词不会溢出，那么 overflow-wrap 属性可以提供帮助。一旦单词太长而无法单独适应一行，此属性将断开单词。

html
<div class="box">
  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>
css
.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
  overflow-wrap: break-word;
}

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

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

在下一个示例中，你可以在相同的文本字符串上比较这两个属性之间的差异。

html
<div class="box box1">A Very LongWordThatHasNoBreakingPossibilities</div>

<div class="box box2">A Very LongWordThatHasNoBreakingPossibilities</div>
css
.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 30ch;
  margin-block-end: 1em;
}
.box1 {
  word-break: break-all;
}

.box2 {
  overflow-wrap: break-word;
}

如果你想防止在字符串刚好有足够空间时出现大间隙，或者在有其他元素你不希望立即断开的情况下，这可能会很有用。

在下面的示例中，有一个复选框和标签。假设，如果标签太长而无法容纳在框中，你希望它断开。但是，你不希望它直接在复选框之后断开。

html
<div class="field">
  <input id="one" type="checkbox" /><label for="one">
    LongWordThatHasNoBreakingPossibilities
  </label>
</div>

<div class="field field-br">
  <input id="two" type="checkbox" /><label for="two">
    LongWordThatHasNoBreakingPossibilities
  </label>
</div>
css
.field {
  inline-size: 150px;
  border: 1px solid #cccccc;
  margin-block-end: 1em;
  padding: 10px;
}

.field-br {
  word-break: break-all;
}

添加连字符

要在单词断开时添加连字符，请使用 CSS hyphens 属性。使用 auto 值，浏览器可以自由地在适当的连字符点自动断开单词，遵循它选择的任何规则。为了对过程进行一些控制，请使用 manual 值，然后将硬断字符 (U+2010) 或软断字符 (U+00AD) 插入到字符串中。硬断字符可以使用 ‐ 或 &#x2010; 添加，软断字符可以使用 &shy;、&#173; 或 &#xad; HTML 字符代码添加。硬断字始终会断开，即使没有必要这样做。软断字仅在需要断开时才断开。

html
<div class="box">
  Llanfair&shy;pwllgwyngyll&shy;gogerychwyrndrobwllllantysiliogogogoch
</div>
css
.box {
  inline-size: 150px;
  overflow-wrap: break-word;
  hyphens: manual;
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
}

你还可以使用 hyphenate-character 属性，使用你选择的字符串代替默认的连字符字符，用于行尾（在连字符换行符之前）的语言。auto 值根据当前内容语言的排版约定选择正确的值来标记单词中换行符。

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

<wbr> 元素

如果你知道要在一个长字符串的何处断开，那么也可以插入 HTML <wbr> 元素。这在页面上显示长 URL 等情况下可能很有用。然后你可以添加该属性以在合理的、使其更易于阅读的位置断开字符串。

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

html
<div class="box">
  Llanfair<wbr />pwllgwyngyll<wbr />gogerychwyrndrobwllllantysiliogogogoch
</div>
css
.box {
  border: 4px solid #f76707;
  border-radius: 5px;
  padding: 10px;
  inline-size: 150px;
}

另见

帮助改进 MDN

了解如何贡献

本页面由 MDN 贡献者 于 最后修改。

在 GitHub 上查看此页面 • 报告此内容的问题