溢出

​基本用法

¥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 不同，它只在必要时显示滚动条，此工具始终显示它们。请注意，无论此设置如何，某些操作系统（如 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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:overflow-scroll to only apply the overflow-scroll utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​断点和媒体查询

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:overflow-scroll to apply the overflow-scroll utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.