overflow

示例

显示溢出的内容

使用 overflow-visible 实用程序来防止元素内的内容被裁剪

Andrew Alfred技术顾问

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

请注意，任何溢出元素边界的内容都将变为可见。

隐藏溢出的内容

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

Andrew Alfred技术顾问

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

在需要时滚动

使用 overflow-auto 实用程序在元素内容溢出其边界时向该元素添加滚动条

垂直滚动

Andrew Alfred技术顾问

Debra Houston分析师

Jane White营销总监

Ray Flint技术顾问

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

与始终显示滚动条的 overflow-scroll 不同，此实用程序仅在需要滚动时显示滚动条。

在需要时水平滚动

使用 overflow-x-auto 实用程序以在需要时允许水平滚动

水平滚动

Andrew

Emily

Whitney

David

Kristin

Sarah

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

在需要时垂直滚动

使用 overflow-y-auto 实用程序以在需要时允许垂直滚动

垂直滚动

Andrew Alfred技术顾问

Debra Houston分析师

Jane White营销总监

Ray Flint技术顾问

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

始终水平滚动

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

水平滚动

Andrew

Emily

Whitney

David

Kristin

Sarah

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

始终垂直滚动

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

垂直滚动

Andrew Alfred技术顾问

Debra Houston分析师

Jane White营销总监

Ray Flint技术顾问

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

在所有方向上滚动

使用 overflow-scroll 实用程序向元素添加滚动条

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

与仅在必要时显示滚动条的 overflow-auto 不同，此实用程序始终显示滚动条。请注意，某些操作系统（如 macOS）会隐藏不必要的滚动条，而与此设置无关。

响应式设计

前缀一个 overflow 实用工具 带有断点变体，例如 md:，仅在以下情况下应用该实用工具中等 屏幕尺寸及以上

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

了解有关在变体文档中使用变体的更多信息。