1. 布局
  2. 溢出

Quick reference

属性
overflow-autooverflow: auto;
overflow-hiddenoverflow: hidden;
overflow-clipoverflow: clip;
overflow-visibleoverflow: visible;
overflow-scrolloverflow: scroll;
overflow-x-autooverflow-x: auto;
overflow-y-autooverflow-y: auto;
overflow-x-hiddenoverflow-x: hidden;
overflow-y-hiddenoverflow-y: hidden;
overflow-x-clipoverflow-x: clip;
overflow-y-clipoverflow-y: clip;
overflow-x-visibleoverflow-x: visible;
overflow-y-visibleoverflow-y: visible;
overflow-x-scrolloverflow-x: scroll;
overflow-y-scrolloverflow-y: scroll;

基本用法

¥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.

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 AM Flight to Vancouver Toronto YYZ
6 AM Breakfast Mel's Diner
5 PM 🎉 Party party 🎉 We like to party!
<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>

要了解更多信息,请查看有关 响应式设计暗黑模式、以及 其他媒体查询修饰符 的文档。