溢出

​基本用法(Basic usage)

​显示溢出的内容(Showing content that overflows)

使用 overflow-visible 工具来防止元素内的内容被裁剪。请注意，任何超出元素边界的内容将会显示出来。

🌐 Use the overflow-visible utility to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible.

Andrew Alfred Technical advisor

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

​隐藏溢出的内容(Hiding content that overflows)

使用 overflow-hidden 工具裁剪元素内超出其边界的任何内容。

🌐 Use the overflow-hidden utility to clip any content within an element that overflows the bounds of that element.

Andrew Alfred Technical advisor

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

​如果需要滚动(Scrolling if needed)

使用 overflow-auto 工具可以在元素的内容超出其边界时为该元素添加滚动条。与始终显示滚动条的 overflow-scroll 不同，该工具只有在需要滚动时才会显示滚动条。

🌐 Use the overflow-auto utility to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

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

​如果需要，水平滚动(Scrolling horizontally if needed)

如有需要，使用 overflow-x-auto 工具允许水平滚动。

🌐 Use the overflow-x-auto utility to allow horizontal scrolling if needed.

Andrew

Emily

Whitney

David

Kristin

Sarah

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

​如果需要垂直滚动(Scrolling vertically if needed)

如有需要，使用 overflow-y-auto 工具允许垂直滚动。

🌐 Use the overflow-y-auto utility to allow vertical scrolling if needed.

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

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

​始终水平滚动(Scrolling horizontally always)

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

🌐 Use the overflow-x-scroll utility to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

Andrew

Emily

Whitney

David

Kristin

Sarah

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

​始终垂直滚动(Scrolling vertically always)

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

🌐 Use the overflow-y-scroll utility to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

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

​向各个方向滚动(Scrolling in all directions)

使用 overflow-scroll 工具为元素添加滚动条。与 overflow-auto 不同，overflow-auto 仅在必要时显示滚动条，而此工具会始终显示它们。请注意，一些操作系统（如 macOS）会隐藏不必要的滚动条，无论此设置如何。

🌐 Use the overflow-scroll utility to add scrollbars to an element. Unlike overflow-auto, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems (like macOS) hide unnecessary scrollbars regardless of this setting.

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

​有条件申请

​悬停、聚焦及其他状态

Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如，使用hover:overflow-scroll 仅在 hover 时应用 overflow-scroll 工具。

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

有关所有可用状态修饰符的完整列表，请查看悬停、聚焦、以及其他状态 文档。

​断点和媒体查询

你还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗黑模式、首选减少运动等。例如，使用 md:overflow-scroll 仅在中等屏幕尺寸及以上时应用 overflow-scroll 工具。

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

要了解更多信息，请查看有关 响应式设计、暗黑模式、以及 其他媒体查询修饰符 的文档。