溢出

​基础用法

​显示溢出的内容

使用 overflow-visible 实用程序可防止元素内的内容被剪裁。请注意，任何超出元素边界的内容都将可见。

Andrew Alfred Technical advisor

<div class="overflow-visible ..."></div>

​隐藏溢出的内容

使用 overflow-hidden 实用程序来剪辑元素内超出该元素边界的任何内容。

Andrew Alfred Technical advisor

<div class="overflow-hidden ..."></div>

​如果需要，请滚动

使用 overflow-auto 实用程序在元素内容超出元素边界时向其添加滚动条。与始终显示滚动条的 overflow-scroll 不同，此实用程序仅在需要滚动时才显示滚动条。

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

<div class="overflow-auto ..."></div>

​如果需要，可水平滚动

如果需要，请使用 overflow-x-auto 实用程序来允许水平滚动。

Andrew

Emily

Whitney

David

Kristin

Sarah

<div class="overflow-x-auto ..."></div>

​如果需要，可垂直滚动

如果需要，请使用 overflow-y-auto 实用程序来允许垂直滚动。

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

<div class="overflow-y-auto h-32 ..."></div>

​始终水平滚动

使用 overflow-x-scroll 实用程序允许水平滚动并始终显示滚动条，除非操作系统禁用始终可见的滚动条。

Andrew

Emily

Whitney

David

Kristin

Sarah

<div class="overflow-x-scroll ..."></div>

​始终垂直滚动

使用 overflow-y-scroll 实用程序允许垂直滚动并始终显示滚动条，除非操作系统禁用始终可见的滚动条。

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

<div class="overflow-y-scroll ..."></div>

​向各个方向滚动

使用 overflow-scroll 实用程序向元素添加滚动条。与仅在必要时显示滚动条的 overflow-auto 不同，此实用程序始终显示滚动条。请注意，无论此设置如何，某些操作系统（如 macOS）都会隐藏不必要的滚动条。

<div class="overflow-scroll ..."></div>

​条件应用

​悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:overflow-scroll 来仅 在 hover应用 overflow-scroll.

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

详细了解, 请参考 Hover, Focus, & Other States 文档.

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:overflow-scroll 来应用 overflow-scroll 程序，适用于中等屏幕尺寸及以上。

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

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.