CSS 教程 / CSS 溢出、长文本换行与省略号

overflow 属性控制延伸出盒子之外的内容，但它本身不会选择有用的文本换行策略。应明确选择溢出处理方式，再配合换行规则，并且仅在读者仍可访问完整信息时使用省略号。

比较具有相同内容的溢出值

滚动条的实际外观以及它是否始终可见，取决于操作系统和浏览器的覆盖滚动条设置。指定 scroll 并不意味着在所有环境中滚动条都会保持可见。hidden 也可以通过脚本或焦点移动进行滚动，因此它并不意味着“内容本身已消失”。clip 会完全禁止滚动，是一个单独的值，不应与 hidden 等同对待。详细操作说明请参见 MDN：overflow。 在隐藏溢出之前，请检查你如何使用 CSS 宽度、高度、min/max 限制与 box-sizing 设置将包含内容的盒子的高度，以确保高度适合内容。

如果将普通文本视为固定高度并隐藏，添加句子、翻译或放大字符时信息可能会消失。首先考虑让高度随内容自动调整，如果需要大小限制，例如在单独的面板中，可以使用 overflow: auto。完整示例使用四个高度均为 96px、内容相同的面板，只改变 overflow 的值。在 visible 演示区域之后，我们留出了一些额外空间用于练习，以便溢出的文本不会遮盖后续解释。

换行长 URL 和标识符

.url { overflow-wrap: anywhere; }

没有空格的 URL、识别码或长单词可能会把框推出去，因为没有足够的位置进行换行。overflow-wrap: anywhere 在必要时提供在字符串中间换行的机会。它不会删除字符本身，也不会在字符串值中插入换行字符。只有显示会改变，所以你可以保留原始字符串。

在所有地方应用 word-break: break-all 可能会不必要地破坏普通单词。首先允许在长值区域中断行。Flexbox 和 Grid 也可能会施加自动最小尺寸，因此请分别检查相关项目的 min-width。换行文本并允许其容器收缩可以解决问题的不同部分。有关更多细节，请参见 MDN：overflow-wrap, Flexbox 对齐、换行、间距、增长和收缩。

满足单行省略号的条件

.title {
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

text-overflow 本身不会决定盒子大小或换行。多行省略也是与此单行示例不同的方法。完整示例在省略后的标题下方再次显示完整标题，读者可以直接阅读原文。不要隐藏需要原始文本的重要内容，例如重要说明或错误信息，除非可以在其他地方检查。我们建议不要仅使用 title 属性的鼠标提示作为唯一的文本来源。MDN：text-overflow。

让键盘用户能够操作滚动面板

<div class="panel auto" tabindex="0" role="region" aria-label="Notice scroll area">
  <p>Notice content</p>
</div>

根据浏览器的不同，滚动区域可能会自动获得键盘焦点，也可能不会。通过为需要访问的面板指定 tabindex="0"，您可以按照正常的 Tab 顺序导航到它。role="region" 和描述性名称可以帮助辅助技术的用户了解他们所在的区域。您不必一定让每个框成为焦点目标或区域。

示例仅为实际需要滚动的 auto 和 scroll 面板提供键盘访问、名称和焦点轮廓。使用 Tab 进入后，检查是否可以使用方向键或 Page Down 移动到最后一段。在窄屏幕上，还需确保区分面板内滚动和页面滚动。

运行完整的溢出示例

将以下代码写入 overflow.html ，以 UTF-8 编码保存并用浏览器打开。页面包含四个相同内容的面板、长 URL、单行省略标题及其完整原文。example.com 地址是一个观察换行的字符串，并非实际资源链接。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing overflowing content</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .panel { width: 100%; max-width: 320px; height: 96px; padding: 12px;
      border: 2px solid #777; background: #eef6fa; }
    .panel p { margin: 0 0 8px; }
    .visible { overflow: visible; }
    .visible-stage { padding-bottom: 240px; }
    .hidden { overflow: hidden; }
    .auto { overflow: auto; }
    .scroll { overflow: scroll; }
    .panel:focus-visible { outline: 3px solid #9b5d00; outline-offset: 3px; }
    .url { max-width: 320px; padding: 12px; border: 1px solid #777; overflow-wrap: anywhere; }
    .title { width: 100%; max-width: 320px; padding: 12px; border: 1px solid #777;
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .original { max-width: 320px; }
  </style>
</head>
<body>
  <h1>Overflow and truncation</h1>
  <section class="visible-stage"><h2>visible</h2><div class="panel visible"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="hidden-stage"><h2>hidden</h2><div class="panel hidden"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="auto-stage"><h2>auto</h2><div class="panel auto" tabindex="0" role="region" aria-label="auto overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="scroll-stage"><h2>scroll</h2><div class="panel scroll" tabindex="0" role="region" aria-label="scroll overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <h2>Long URL wrapping</h2><p class="url">https://example.com/abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
  <h2>Single-line truncation</h2><p class="title">A day of plant care and visitor preparation at Small Garden</p>
  <p class="original">Full title: A day of plant care and visitor preparation at Small Garden</p>
</body>
</html>

1. 比较四个面板的最后一段。在 visible 中，它出现在边框外；在 hidden 中，它被隐藏；在 auto·scroll 中，应能通过面板内滚动读到最后一句。
2. 在 auto 面板中只保留一段。当内容变得足够短时，检查滚动空间是否消失，并将其恢复为四段。不要仅凭看到滚动条就判断内容是否溢出。
3. 使用Tab键移动到自动面板，并使用箭头键检查下面的内容。确保焦点轮廓可见，然后使用Shift+Tab键移动到前面的目标。
4. 关闭URL中的overflow-wrap声明并缩小窗口。检查长字符串是否水平溢出，然后恢复为 anywhere。
5. 仅将标题的text-overflow更改为clip，并比较没有省略号被截断的结果。接下来，将nowrap更改为normal以检查换行的结果，然后恢复到原来的值。

如果整页出现水平溢出，请检查最宽元素及其父元素的最小宽度/内边距。如果要阅读的内容消失，请先检查固定高度和 overflow: hidden。在添加滚动或省略号之前，需要确定如何保留原始文本以及是否可以操作。