布局
用于控制元素如何处理对于容器来说太大的内容的工具。
¥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.
<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.
<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.
<div class="overflow-auto ..."></div>
¥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
如果需要,使用 overflow-y-auto
工具允许垂直滚动。
¥Use the overflow-y-auto
utility to allow vertical scrolling if needed.
<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.
<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
工具向元素添加滚动条。与 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>