0Pricing
CSS Academy · 课时

溢出：滚动、裁剪与自动

使用 overflow 属性控制内容超出容器时的显示方式。

溢出：滚动、裁剪与自动 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是溢出

当元素的内容大于其定义的尺寸时，就会发生溢出。overflow 属性控制如何处理这些多余内容。

overflow: visible（默认值）

默认情况下，溢出的内容会显示在元素盒外部。这可能导致内容与兄弟元素重叠，或超出视口。

<div class="box">This text is long enough to spill outside the box edges visibly.</div>

overflow: hidden

overflow: hidden 会裁剪超出元素边界的所有内容。被裁剪的内容无法访问，也无法滚动查看。

<div class="cropped">This long text gets clipped by the rounded box edges instead of spilling out.</div>

overflow: scroll

overflow: scroll 始终显示滚动条，即使内容完全放得下。当您希望无论内容大小如何都保持界面一致时，可以使用它。

<pre class="code-block">line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10</pre>

overflow: auto

overflow: auto 仅在内容确实溢出时显示滚动条。通常应优先使用它而不是 scroll，以避免不必要的滚动条占用区域。

<div class="sidebar"><p>Paragraph one.</p><p>Paragraph two.</p><p>Paragraph three.</p><p>Paragraph four.</p><p>Paragraph five.</p><p>Paragraph six.</p></div>

overflow: clip

overflow: clip 类似于 hidden，但限制更严格：它不会创建块格式化上下文，也不能通过 JavaScript 滚动。非常适合用于对性能安全的裁剪。

<div class="clipped">This long text will be clipped at the box edge with no scrollbar, unlike overflow hidden which still allows programmatic scrolling.</div>

overflow-x 和 overflow-y

请独立控制每个轴。一个常见模式是允许宽内容（例如代码或表格）进行水平滚动：

<div class="table-container"><table><tr><td>Col A</td><td>Col B</td><td>Col C</td><td>Col D</td><td>Col E</td><td>Col F</td></tr></table></div>

可滚动容器模式

要创建可滚动容器，需要同时设置固定高度和 overflow: auto 或 scroll：

<div class="chat-messages"><p>Hey!</p><p>How's it going?</p><p>Working on the CSS course.</p><p>Nice, how far are you?</p><p>Almost done with overflow.</p><p>Let's grab lunch after.</p></div>

由 overflow 创建块格式化上下文

将 overflow 设置为除 visible 以外的任意值，都会创建一个块格式化上下文（BFC）。这会包含内部浮动，并防止外边距折叠逸出容器。

滚动链

当可滚动容器滚动到边界时，滚动事件可能会“链式传递”给父元素。请使用 overscroll-behavior: contain 来阻止这种情况。

<div class="modal-body"><p>Modal content line 1</p><p>Modal content line 2</p><p>Modal content line 3</p><p>Modal content line 4</p><p>Modal content line 5</p><p>Modal content line 6</p></div>

text-overflow 与 overflow

text-overflow: ellipsis 处理的是元素内部的文本，并且必须结合 overflow: hidden + white-space: nowrap 才能生效。overflow 控制的是元素自身的溢出行为。

快速检查

哪个 overflow 值只会在内容实际溢出时显示滚动条？

回顾

overflow: hidden 会裁剪内容。overflow: auto 仅在需要时添加滚动条（推荐）。overflow: scroll 始终显示滚动条。overflow: clip 会裁剪内容，但不会创建新的格式化上下文。请使用 overflow-x/y 进行单轴控制。

常见问题解答

「溢出：滚动、裁剪与自动」课时是免费的吗？

是的 — 「溢出：滚动、裁剪与自动」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「溢出：滚动、裁剪与自动」这节课中我会学到什么？

使用 overflow 属性控制内容超出容器时的显示方式。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「溢出：滚动、裁剪与自动」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 块级、行内与行内块
  2. 可见性与 Display None
  3. 溢出：滚动、裁剪与自动
  4. CSS 重置与规范化
← 返回 CSS Academy