overflow

用于控制元素如何处理超出容器的内容的工具类。

快速参考

类	属性
overflow-auto	overflow: auto;
overflow-hidden	overflow: hidden;
overflow-clip	overflow: clip;
overflow-visible	overflow: visible;
overflow-scroll	overflow: scroll;
overflow-x-auto	overflow-x: auto;
overflow-y-auto	overflow-y: auto;
overflow-x-hidden	overflow-x: hidden;
overflow-y-hidden	overflow-y: hidden;
overflow-x-clip	overflow-x: clip;
overflow-y-clip	overflow-y: clip;
overflow-x-visible	overflow-x: visible;
overflow-y-visible	overflow-y: visible;
overflow-x-scroll	overflow-x: scroll;
overflow-y-scroll	overflow-y: scroll;

示例

显示溢出内容

使用 overflow-visible 工具类防止元素内的内容被裁剪：

Andrew AlfredTechnical advisor

<!-- [!code classes:overflow-visible] -->
<div class="overflow-visible ...">
  <!-- ... -->
</div>

注意，任何超出元素边界的内容都会可见。

隐藏溢出内容

使用 overflow-hidden 工具类裁剪元素内超出该元素边界的内容：

Andrew AlfredTechnical advisor

<!-- [!code classes:overflow-hidden] -->
<div class="overflow-hidden ...">
  <!-- ... -->
</div>

需要时滚动

使用 overflow-auto 工具类，在内容超出元素边界时为该元素添加滚动条：

Andrew AlfredTechnical advisor

Debra HoustonAnalyst

Jane WhiteDirector, Marketing

Ray FlintTechnical Advisor

<!-- [!code classes:overflow-auto] -->
<div class="overflow-auto ...">
  <!-- ... -->
</div>

与始终显示滚动条的 overflow-scroll 不同，该工具类仅在需要滚动时才显示滚动条。

需要时水平滚动

使用 overflow-x-auto 工具类，在需要时允许水平滚动：

Andrew

Emily

Whitney

David

Kristin

Sarah

<!-- [!code classes:overflow-x-auto] -->
<div class="overflow-x-auto ...">
  <!-- ... -->
</div>

需要时垂直滚动

使用 overflow-y-auto 工具类，在需要时允许垂直滚动：

Andrew AlfredTechnical advisor

Debra HoustonAnalyst

Jane WhiteDirector, Marketing

Ray FlintTechnical Advisor

<!-- [!code classes:overflow-y-auto] -->
<div class="h-32 overflow-y-auto ...">
  <!-- ... -->
</div>

始终允许水平滚动

使用 overflow-x-scroll 工具类允许水平滚动，并始终显示滚动条（除非操作系统禁用了始终可见的滚动条）：

Andrew

Emily

Whitney

David

Kristin

Sarah

<!-- [!code classes:overflow-x-scroll] -->
<div class="overflow-x-scroll ...">
  <!-- ... -->
</div>

始终允许垂直滚动

使用 overflow-y-scroll 工具类允许垂直滚动，并始终显示滚动条（除非操作系统禁用了始终可见的滚动条）：

Andrew AlfredTechnical advisor

Debra HoustonAnalyst

Jane WhiteDirector, Marketing

Ray FlintTechnical Advisor

<!-- [!code classes:overflow-y-scroll] -->
<div class="overflow-y-scroll ...">
  <!-- ... -->
</div>

各方向滚动

使用 overflow-scroll 工具类为元素添加滚动条：

Sun

Mon

Tue

Wed

Thu

Fri

Sat

5 AM

6 AM

7 AM

8 AM

9 AM

10 AM

11 AM

12 PM

1 PM

2 PM

3 PM

4 PM

5 PM

6 PM

7 PM

8 PM

5 AMFlight to VancouverToronto YYZ

6 AMBreakfastMel's Diner

5 PM🎉 Party party 🎉We like to party!

<!-- [!code classes:overflow-scroll] -->
<div class="overflow-scroll ...">
  <!-- ... -->
</div>

与仅在必要时显示滚动条的 overflow-auto 不同，该工具类始终显示滚动条。注意，某些操作系统（如 macOS）无论此设置如何，都会隐藏不必要的滚动条。

响应式设计

使用 md: 等断点变体作为 overflow 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

<div class="overflow-auto md:overflow-scroll ...">
 <!-- ... -->
</div>

了解如何使用变体，请参阅变体文档。