CSS overflow 溢出：hidden、scroll、auto、clip 与省略号

overflow 的作用

当内容比盒子大时（固定的高度、很长的单词、很宽的表格），就会溢出。overflow 属性决定多出来的部分如何处理：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overflow values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
    .box {
      width: 150px; height: 50px; padding: 8px;
      border: 2px solid #2563eb; background: #eff6ff;
      margin-bottom: 60px;
    }
    .visible { overflow: visible; }
    .hidden { overflow: hidden; }
    .scroll { overflow: scroll; }
    .auto { overflow: auto; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box visible"><b>visible</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box hidden"><b>hidden</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box scroll"><b>scroll</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box auto"><b>auto</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
  </div>
</body>
</html>

在 macOS 和手机上，滚动条会叠加在内容上方并自动淡出，所以在你滚动之前，scroll 和 auto 看起来可能一模一样。

制作可滚动的盒子

只有当某个条件限制了盒子的尺寸时，它才会溢出。设置 height 或 max-height，再加上 overflow-y: auto，就能把一个很长的列表变成可滚动的面板：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrollable list</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid #d1d5db; border-radius: 8px;
    }
    .panel p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="panel" id="panel">
    <p>Message 1</p><p>Message 2</p><p>Message 3</p><p>Message 4</p>
    <p>Message 5</p><p>Message 6</p><p>Message 7</p><p>Message 8</p>
  </div>
</body>
</html>

这里用 max-height 比用 height 更好：短列表保持短小，只有长列表才会滚动。如果可滚动区域内没有可聚焦的内容，应该给它加上 tabindex="0"，这样使用键盘的用户也能滚动它。

overflow-x 与 overflow-y

两个轴可以分别设置。常见的用法是让一个很宽的表格在容器内横向滚动，而不是把整个页面撑宽：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal scroll</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .table-wrap { overflow-x: auto; border: 1px solid #d1d5db; max-width: 360px; }
    table { border-collapse: collapse; }
    th, td { padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="table-wrap" id="wrap">
    <table>
      <tr><th>Plan</th><th>Monthly</th><th>Yearly</th><th>Users</th><th>Storage</th><th>Support</th></tr>
      <tr><td>Free</td><td>$0</td><td>$0</td><td>1</td><td>1 GB</td><td>Community</td></tr>
      <tr><td>Team</td><td>$12</td><td>$120</td><td>10</td><td>100 GB</td><td>Email</td></tr>
    </table>
  </div>
</body>
</html>

有一条规则要记住：如果一个轴是 hidden、scroll 或 auto，另一个轴上的 visible 值就会变成 auto。所以只写 overflow-x: hidden 可能会给你带来一个意料之外的垂直滚动条。overflow-x: clip 没有这个问题：

.a { overflow-x: hidden; }  /* overflow-y computes to auto */
.b { overflow-x: clip; }    /* overflow-y stays visible */

用省略号截断文字

text-overflow: ellipsis 会把一行文字被裁剪的末尾替换成“…”。它需要三个条件同时满足：宽度受限、文字不能换行、溢出被隐藏：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ellipsis</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .one-line {
      width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid #d1d5db; padding: 6px;
    }
    .three-lines {
      width: 240px; margin-top: 12px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      border: 1px solid #d1d5db; padding: 6px;
    }
  </style>
</head>
<body>
  <div class="one-line" id="one">A very long file name that will not fit in the box.pdf</div>
  <div class="three-lines" id="three">This paragraph is longer than three lines. Only the first three lines are shown and the end of the third one becomes an ellipsis, which suits card previews and search results.</div>
</body>
</html>

带 -webkit- 前缀的多行截断在 Chrome、Firefox 和 Safari 中都能使用。屏幕阅读器仍然会读出完整的文字，所以被裁掉的内容对他们来说并没有丢失。

overflow 的副作用

把 overflow 设为 visible 或 clip 以外的值，改变的不只是裁剪：

• 它会包含浮动元素和子元素的外边距。 元素会形成一个新的块格式化上下文，因此会变大以包住浮动的子元素。display: flow-root 也能做到这一点，而且不会裁剪任何内容。
• 它会让下面的 position: sticky 失效。 sticky 子元素会粘在最近的滚动容器上；如果这个容器并不滚动，就什么都粘不住。
• 它会裁剪绝对定位的子元素（当溢出的元素同时也是它们的包含块时），包括下拉菜单和提示框，子元素的盒子阴影也会被裁剪。

隐藏滚动条

用 scrollbar-width: none 可以在保留滚动功能的同时隐藏滚动条。请谨慎使用：没有滚动条，很多读者意识不到还有更多内容。scrollbar-gutter: stable 的作用正好相反：它预留出滚动条的空间，这样滚动条出现时内容不会发生位移。

常见错误

• 没有尺寸限制却期待溢出。 没有 height 或 max-height 的盒子会直接变大，而不是溢出。
• 在 body 上设置 overflow: hidden 来“修复”横向滚动。 应该找出那个过宽的元素（通常是固定的 width、很长的 URL，或者在有滚动条时使用的 100vw）。
• 使用省略号却没有 white-space: nowrap。 文字会换行，水平方向上没有任何溢出，也就不会出现省略号。
• overflow-x: hidden 产生了垂直滚动条。 改用 clip。
• 下拉菜单被所在的卡片截断。 是卡片的 overflow: hidden 裁剪了它；移走这条 overflow 规则，或者把下拉菜单渲染到卡片外面。