1. 布局
  2. overflow

布局

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:

Andrew AlfredTechnical advisor
<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:

Andrew AlfredTechnical advisor
<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:

垂直滚动

Andrew AlfredTechnical advisor
Debra HoustonAnalyst
Jane WhiteDirector, Marketing
Ray FlintTechnical Advisor
<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:

水平滚动

Andrew
Emily
Whitney
David
Kristin
Sarah
<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:

垂直滚动

Andrew AlfredTechnical advisor
Debra HoustonAnalyst
Jane WhiteDirector, Marketing
Ray FlintTechnical Advisor
<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:

水平滚动

Andrew
Emily
Whitney
David
Kristin
Sarah
<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:

垂直滚动

Andrew AlfredTechnical advisor
Debra HoustonAnalyst
Jane WhiteDirector, Marketing
Ray FlintTechnical Advisor
<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:

垂直和水平滚动

Sun
Mon
Tue
Wed
Thu
Fri
Sat
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
5 AMFlight to VancouverToronto YYZ
6 AMBreakfastMel's Diner
5 PM🎉 Party party 🎉We like to party!
<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>

请参阅 变体文档 详细了解如何使用变体。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号