布局
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)
¥Examples
显示溢出的内容(Showing content that overflows)
¥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)
¥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)
¥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)
¥Scrolling horizontally if needed
使用 overflow-x-auto
工具允许水平滚动(如果需要):
¥Use the overflow-x-auto
utility to allow horizontal scrolling if needed:
水平滚动
<div class="overflow-x-auto ..."><!-- ... --></div>
如果需要垂直滚动(Scrolling vertically if needed)
¥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)
¥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:
水平滚动
<div class="overflow-x-scroll ..."><!-- ... --></div>
始终垂直滚动(Scrolling vertically always)
¥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)
¥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)
¥Responsive design
在 overflow
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="overflow-auto md:overflow-scroll ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。