布局
overflow
Utilities for controlling how an element handles content that is too large for the container.
| 类 | 样式 |
|---|---|
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; |
示例(Examples)
显示溢出的内容(Showing content that overflows)
使用 overflow-visible 工具防止元素内的内容被裁剪：
🌐 Use the overflow-visible utility to prevent content within an element from being clipped:
<div class="overflow-visible ..."> <!-- ... --></div>请注意，任何溢出元素边界的内容都将是可见的。
🌐 Note that any content that overflows the bounds of the element will then be visible.
隐藏溢出的内容(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:
<div class="overflow-hidden ..."> <!-- ... --></div>如果需要滚动(Scrolling if needed)
使用 overflow-auto 工具在元素内容溢出元素边界时为该元素添加滚动条：
🌐 Use the overflow-auto utility to add scrollbars to an element in the event that its content overflows the bounds of that element:
垂直滚动
<div class="overflow-auto ..."> <!-- ... --></div>与始终显示滚动条的 overflow-scroll 不同，这个工具只有在需要滚动时才会显示滚动条。
🌐 Unlike overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.
如果需要，水平滚动(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:
垂直滚动
<div class="h-32 overflow-y-auto ..."> <!-- ... --></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:
水平滚动
AndrewEmilyWhitneyDavidKristinSarah<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:
垂直滚动
<div class="overflow-y-scroll ..."> <!-- ... --></div>向各个方向滚动(Scrolling in all directions)
使用 overflow-scroll 工具为一个元素添加滚动条：
🌐 Use the overflow-scroll utility to add scrollbars to an element:
垂直和水平滚动
<div class="overflow-scroll ..."> <!-- ... --></div>与只在必要时显示滚动条的 overflow-auto 不同，该工具总是显示滚动条。请注意，一些操作系统（如 macOS）无论此设置如何，都会隐藏不必要的滚动条。
🌐 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.
响应式设计(Responsive design)
在 overflow 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="overflow-auto md:overflow-scroll ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。